时间戳

首页 > 解决方案 > 用户使用角度编辑表单时如何显示价值

angular - 用户使用角度编辑表单时如何显示价值

问题描述

我想在用户编辑时编辑并在表单中显示值，请帮助我如何以角度显示值。

编辑-blog.component.ts

import { Component, OnInit } from '@angular/core';
import { Blog } from '../_models/blog';
import { UserService } from '../_services';
import { User } from '../_models'
import { Router } from '@angular/router';
import { AuthenticationServiceService } from '../_services';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
@Component({
  selector: 'app-edit-blog',
  templateUrl: './edit-blog.component.html',
  styleUrls: ['./edit-blog.component.css']
})
export class EditBlogComponent implements OnInit {
  editBlogForm: FormGroup;
  users: User[] = [];
  submitted = false;
  constructor(private router: Router,
    private formBuilder: FormBuilder,

    private authenticationService: AuthenticationServiceService,
    private userService: UserService) { }
    get f() { return this.editBlogForm.controls; }
  ngOnInit() {
    this.editBlogForm = this.formBuilder.group({
      title: [this.users, Validators.required],
      blog: [this.users, Validators.required],
    });
  }
  //get f() { return this.editBlogForm.controls; }
  editUserBlog(id:number) {
    this.userService.editUserBlog(id).pipe(first()).subscribe(users => {
      users = users;
      console.log(users);
    });

  }
  onSubmit(user: User) {
    this.userService.update(user).subscribe(user => {
      user = user;

    });
  }


}

下面是我的 edit-blog.componet.html 我想以这种形式显示价值请帮助如何显示价值。

编辑-blog.component.html

<div>
    <div class="container">
        <div class="row">

            <div class="col-sm-3">
            </div>
            <div class="col-sm-6" style="margin-top: 60px">
                <h2>Update your blog here..</h2>
                <form [formGroup]="editBlogForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <input type="text" [(ngModel)]="users.title" formControlName="title" class="input" [ngClass]="{ 'is-invalid': submitted && f.title.errors }"
                            placeholder="Title" />
                        <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
                            <div *ngIf="f.title.errors.required">Title is required</div>
                        </div>
                    </div>
                    <div class="form-group">

                        <app-ngx-editor type="text" formControlName="blog" height="250px" minHeight="50px" class=""
                            [placeholder]="'Enter text here...'" [spellcheck]="true" [ngClass]="htmlContent"></app-ngx-editor>
                        <div *ngIf="submitted && f.blog.errors" class="invalid-feedback">
                            <div *ngIf="f.blog.errors.required">Blog is required</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary">Update</button>

                    </div>
                </form>

            </div>

            <div class="col-sm-3">

            </div>

        </div>
    </div>
</div>

我在编辑表格时没有得到价值，请帮助我如何显示价值。谢谢你提前。

标签： angular

解决方案

首先，这里是关于表单的 Angular 文档的链接：Forms Overview in Angular

在 Angular 中，有两种主要的创建表单的方法——反应式方法和模板驱动方法。首先，您必须决定首先要采用哪种方法。

反应式方法是一种编程方法，您的表单是在您的 .ts 文件中创建的，并与 HTML 表单模板同步，并应用诸如 formGroup （在开始的表单标记中）和 formControlName 等指令附加到您在您的设置中为此设置的值.ts 文件及其各自的输入标签。

模板驱动的方法主要在您的模板中完成，即 .html 文件......在这种情况下，指令 [ngModel] 用作 formControl 并且 html“名称”属性存在以帮助您跟踪表单值控制台上的表单对象。

但是，要在表单中显示预设值，请先确定要采用的方法。对于 TD 方法 - 只需使用 HTML 属性“值”并将其设置为所需的值。例如用于用户名输入；value="Benneee".... 对于反应式方法 - 在声明 FormGroup 对象的类型之后，代替将表单对象分配给其定义的值并分配不同的表单控件名称，您可以执行以下操作：“用户名”：新的 FormControl("Benneee");

我希望这确实有所帮助，或者至少为您指明了正确的方向。

推荐阅读