禁用Angular8表单输入字段

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，因此每次角运行它时，例如当您试图键入时，并且填充了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 || '']
  });
}