在 Angular 响应式表单中更新验证器

Question

我在更新 car_description 的值时遇到问题。最初，car_description 设置为必需。但是如果 value.car_description 不为空，那么我需要从 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

都是假的。

两种可能的解决方案是：

否定检查：而不是

if (this.serviceTransactionForm.valid)

检查

if (!this.serviceTransactionForm.invalid)

在 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')

在 Angular 响应式表单中更新验证器

Update Validators in Angular Reactive Forms

angular

angular-reactive-forms

angular8