角度反应形式的验证答案

【问题标题】：Validations in angular reactive forms角度反应形式的验证
【发布时间】：2020-01-27 00:23:59
【问题描述】：

我的反应角度形式有一个字段，我正在尝试向它添加验证。在我的服务类中，我可以使用 Validators.required，默认情况下由 Angular 提供，如下所示

Countrycode: new FormControl('', [Validators.required, Validators.maxLength(12)])

但是条件是，如果国家是加拿大，那么这个 Validators.required 应该可以工作，否则 Validators.required 就不需要了。如果国家/地区不是加拿大，则只需如上所述进行 maxLength 验证。我该怎么做？

【问题讨论】：

您需要检查该国家/地区是否是加拿大，如果是，请相应地设置您的验证器，就这么简单；）如果您遇到问题，请向我们展示您正在努力解决的实际代码以及究竟是什么错了。
那是我的验证码。我是 Angular 新手，所以不知道该怎么做
你需要有条件地设置验证器。 Google 比如：“conditional validation angular”或者在 Stackoverflow 上搜索，也有类似的问题。询问 SO 应该显示一些解决问题的尝试，它不是免费的编码服务。如果遇到问题，请先尝试一下，然后再回来 :)

标签： angular angular6 angular7 angular8

【解决方案1】：

您可以通过选择它来更新 Country Validators，如下代码：

onChangeCountry(country) {    
   if (country == "Canada") {
       this.form.controls.country.setValidators([Validators.required,Validators.maxLength(12)]);
   }else {    
       this.form.controls.country.setValidators([Validators.maxLength(12)]);


         } 
  this.form.controls.country.updateValueAndValidity();
}

【讨论】：

如何在这个 .如果字段为空，我想显示的字段是强制性的。如果字段不为空但超过 12 个字符，那么要显示的字符不能超过 12 个？

【解决方案2】：

除了 Irwing 的回答，您还可以使用以下方式订阅 FormControl 更改：

this.form.get('CountryCode').valueChanges.subscribe(val => {
    onChangeCountry(val);
});

但是，最好的做法是注入您自己的自定义验证函数作为控件的一部分，而不是监听更改：

Countrycode: new FormControl('', [countryValidator, Validators.maxLength(12)])


export function countryValidator(control: AbstractControl) {
     if (otherValue == 'Canada' && !control.Value) {
        //validation fails
        return { invalid: true };
     }
     //validation passes
     return null;
  };
}

HTH

【讨论】：

这个其他值是什么
@user4444 我只是以它为例，它可能与您的情况无关，但您只需要应用该if 语句中适用的任何条件即可。