时间戳

首页 > 解决方案 > angular 5 根据另一个字段的值有条件地验证字段

angular - angular 5 根据另一个字段的值有条件地验证字段

问题描述

如何根据另一个字段的值有条件地验证一个字段？这是我尝试过的，但似乎不起作用

this.PDform = _formbuilder.group({
    [...]
    'intlNumber': ['',this.nationality == 'Abroad' ? Validators.compose([Validators.pattern(this.phoneNumberExp), Validators.maxLength(14), Validators.minLength(11), Validators.required]) : Validators ]
    [...]
})

标签： angularangular5angular-reactive-formsangular-formsangular-validation

解决方案

当另一个表单控件的值发生变化时，您可以通过订阅valueChanges表单控件实例提供的 observable 来更改表单控件的验证器：

const control1 = <FormControl>this.form.get('control1');
const control2 = <FormControl>this.form.get('control2');

control1.valueChanges.subscribe(value => {
  if (value === 'first-condition') {
    control2.setValidators([Validators.required, ...])
  }
  else {
    control2.setValidators(null);
  }

  control2.updateValueAndValidity();
});

这是一个人为的示例，但该模式可以根据您的用例进行调整。不要忘记将订阅分配给您的视图模型并在您的控件被销毁时取消订阅。

这是一个 StackBlitz 示例：https ://stackblitz.com/edit/conditional-validation

推荐阅读