javascript - 禁用 Angular 8 表单输入字段

Question

我正在使用 Angular8 并有一个用于更新产品的表单。但是，我的问题是此表单输入字段和提交按钮被禁用。谁能告诉我我做错了什么？我希望能够编辑输入字段文本并提交表单。

html:

<div class="bodyClass">
    <h1>{{title | titlecase}}</h1>
    <div class="card">
        <div class="card-body">
            <form *ngIf="angForm && productData" [formGroup]="angForm" novalidate>
                <div class="form-group">
                    <label class="col-md-4">Product Name</label>
                    <input type="text" class="form-control" formControlName="name" #name/>
                </div>
                <div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)"
                    class="alert alert-danger">
                    <div *ngIf="angForm.controls['name'].errors.required">
                        Product Name is required.
                    </div>
                </div>
                <div class="form-group">
                    <button (click)="updateProduct(name.value)" type="submit" class="btn btn-primary"
                        [disabled]="angForm.invalid">
                        Update Product
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

组件:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { PermissionsService } from '../../services/permissions.service';
import { Permissions } from '../../model/permissions';
import { ProductsService } from '../../services/products.service';
import { DataService } from '../../services/data.service';
import { Product } from '../../model/product';

@Component({
  selector: 'app-productsupdate',
  templateUrl: './productsupdate.component.html',
  styleUrls: ['./productsupdate.component.css']
})
export class ProductsupdateComponent implements OnInit {

  angForm: FormGroup;
  private permissionsObservable: Observable<Permissions>; 
  private showData: boolean = true;
  private title: string;
  private productData: Product;

  constructor(private _permissionsService: PermissionsService, private _productService: ProductsService,
              private dataService: DataService, private fb: FormBuilder) {
                this.createForm();
  }

  ngOnInit() {
    this.title = 'Update Product';
    if (this.dataService.serviceData) {
      console.log(this.dataService.serviceData);
      this.productData = this.dataService.serviceData; 
    }
  }

  ngDoCheck() {
    if (this.productData) {
      this.angForm.get('name').setValue(this.productData.name);
    }
  }

  createForm() {
    this.angForm = this.fb.group({
      name: ['', Validators.required ],
      decription: ['', Validators.required ],
      status: ['', Validators.required ]
    });
  }

  updateProduct() {
    console.log('submit');
  }
}

屏幕截图:

可以看到按钮被禁用，输入的文本不可编辑。

Answer 1

您正在使用 ngDoCheck，因此每次 Angular 都会运行它，例如当您尝试输入时，productData 会被填充，

this.angForm.get('name').setValue(this.productData.name);

已运行，因此始终设置值，使其看起来您无法编辑该字段。

因为这也可能是竞争条件，因为表单是异步的，所以我建议在获取 productData 的值(如果获取值)之后构建表单。因此，从构造函数中删除 createForm() 函数，稍后再添加它:

if (this.dataService.serviceData) {
  console.log(this.dataService.serviceData);
  this.productData = this.dataService.serviceData; 
}
this.createForm();

稍微修改一下createForm函数:

createForm() {
  this.angForm = this.fb.group({
    name: [this.productData.name || '', Validators.required ],
    description: [this.productData.description || ''],
    status: [this.productData.status || '']
  });
}