更新 Angular 中的驗證器響應式 Forms

Question

我在更新car_description的值時遇到問題。 最初， car_description設置為 required。 但是如果value.car_description不是 null 那么我需要從onSelectPlateNo()修補它的值。 它應該被禁用，所以你不能改變它。

我現在的問題是我無法提交它，因為即使已經設置了值，它仍然是必需的。

this.serviceTransactionForm = this.formBuilder.group({
    car_description: [null, Validators.required],
});



onSelectPlateNo(value) {
    if (value.car_description) {
      this.serviceTransactionForm.get('car_description').clearValidators();
      this.serviceTransactionForm.get('car_description').setValidators(null);
      this.serviceTransactionForm.get('car_description').updateValueAndValidity();
      this.serviceTransactionForm.get('car_description').disable();
      this.serviceTransactionForm.get('car_description').setValue(value.car_description);
    } else {
      this.serviceTransactionForm.get('car_description').enable();
    }
  }

Answer 1

一個 formControl 可以是

• 有效的
• 無效的
• 已禁用
• 待辦的

經過

this.serviceTransactionForm.get('car_description').disable();

您正在將此表單字段的狀態設置為DISABLED 。 的價值觀

this.serviceTransactionForm.get('car_description').valid

和

this.serviceTransactionForm.get('car_description').invalid

都是假的。

兩種可能的解決方案是：

1. 否定檢查：而不是

   if (this.serviceTransactionForm.valid)

   檢查

   if (.this.serviceTransactionForm.invalid)

2. 在 HTML 模板中使用readOnly而不是disabled

    <input type="text" formControlName="car_description" [readonly]="car_description_read_only">

您可以將代碼減少到

this.serviceTransactionForm = this.formBuilder.group({
    car_description: [null, Validators.required],
});

car_description_read_only = false;

onSelectPlateNo(value) {
    if (value.car_description) {
      this.serviceTransactionForm.get('car_description').setValue(value.car_description);
      this.car_description_read_only = true;
    } else {
      this.serviceTransactionForm.get('car_description').enable();
    }
  }

Answer 2

您可以使用 removeControl。 您的示例： this.serviceTransactionForm.removeControl('car_description')