Question

我的表单元素如下：

<input type="text" id="country" formControlName="Country" />

我的表单组如下：

 this.myForm = this.formbuilder.group({
            'Country': [{ value: this.user.Country, disabled: this.SomeProperty===true}, [Validators.required]],
});

当this.SomeProperty为true时将其禁用时，所需的验证器将根本不起作用，并且会启用Save按钮。

<button type="submit" [disabled]="!myForm.valid">Save</button>

反正有强制对禁用属性进行验证吗？

Required属性可以为null的原因是由于某些数据问题或数据从其他源迁移而没有我无法控制的必需值。

Answer 1

嗯。。通常，Angular Reactive Forms不会触发禁用表单字段的验证器。

我可以为您提供两种解决这种情况的方法：

1）在您的FormGroup上编写一个自定义验证器，以手动检查每个单独的Form Control的值。

this.myForm = this.formbuilder.group({
  'Country': [{ value: this.user.Country, disabled: this.SomeProperty===true}, [Validators.required]],
   // other FormControls
}, { validator: GroupValidator.checkEveryField() });

然后，创建一个新的Validator类，以检查空的Country FormControl。如果为空，将返回验证错误。

import { AbstractControl } from '@angular/forms';

export class GroupValidator {

  static checkEveryField(control: AbstractControl) {
    const { Country } = control.value;
    if (!Country) {
      return { 'invalidCountry': true };
    } else {
      return null;
    }
  }
}

2）编写一种在将值修补到FormGroup之前检查传入数据值的方法。

this.someService.getData().subscribe(response => {
  if (!response.user.Country) {
    // trigger invalid validation response
  } else {
    this.myForm.patchVaue(response.user);
  }
});

如何强制验证禁用的财产？

1 个答案: