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 ，因此每次使用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函數：

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

Answer 2

您的表單還包含所需的描述和狀態，並且您不提供這些描述和狀態，因此您的表單無效且您無法提交。