在多个字段的 Angular 中设置验证器

Question

我正在尝试寻找使用验证器更新表单字段的简单方法。现在我执行以下操作：

 ngOnInit() { 
        this.form.get('licenseType').valueChanges.subscribe(value => {
        this.licenseChange(value);
    })
 }

 licenseChange(licenseValue: any) {
    if (licenseValue === 2) {
        this.form.get('price').setValidators([Validators.required]);
        this.form.get('price').updateValueAndValidity();
        this.form.get('noOfLicenses').setValidators([Validators.required]);
        this.form.get('noOfLicenses').updateValueAndValidity();
        this.form.get('licenseKey').setValidators([Validators.required]);
        this.form.get('licenseKey').updateValueAndValidity();
        this.form.get('supportNo').setValidators([Validators.required]);
        this.form.get('supportNo').updateValueAndValidity();
        this.form.get('purchasedFrom').setValidators([Validators.required]);
        this.form.get('purchasedFrom').updateValueAndValidity();
        //......others follows here
    }
    else {
        this.form.get('price').clearValidators(); this.form.get('price').updateValueAndValidity();
        this.form.get('noOfLicenses').clearValidators(); this.form.get('noOfLicenses').updateValueAndValidity();
        this.form.get('licenseKey').clearValidators(); this.form.get('licenseKey').updateValueAndValidity();
        this.form.get('supportNo').clearValidators(); this.form.get('supportNo').updateValueAndValidity();
        this.form.get('purchasedFrom').clearValidators(); this.form.get('purchasedFrom').updateValueAndValidity();
        //......others follows here
    }       
}

这是添加和更新验证器的唯一方法还是有任何其他方法可以实现此目的。现在我在每个字段 setting/clearing 之后调用 updateValueAndValidity()。

更新

类似

licenseChange(licenseValue: any) {
 if (licenseValue === 2) {
    this.form.get('price').setValidators([Validators.required]);        
    //......others follows here
 }
 else{
    //......
 }
}
this.form.updateValueAndValidity();///only one line at the bottom setting the entire fields.

Answer 1

我做了类似的事情

 licenseChange(licenseValue: any) {
        if (licenseValue === 2) {
            this.updateValidation(true,this.form.get('price'));
            //......others follows here
        }
        else {
               this.updateValidation(false,this.form.get('price'));
            //......others follows here
        }       
    }  


    //TODO:To update formgroup validation
      updateValidation(value, control: AbstractControl) {
        if (value) {
            control.setValidators([Validators.required]);
        }else{
           control.clearValidators();
        } 
        control.updateValueAndValidity();
      }

如果您想对表单中的所有控件执行此操作

 licenseChange(licenseValue: any) {

    for (const field in this.form.controls) { // 'field' is a string

        const control = this.form.get(field); // 'control' is a FormControl

         (licenseValue === 2) ? this.updateValidation(true, 
             control):this.updateValidation(fasle, control);

    } 
}

Answer 2

我是这样做的：

this.form.get('licenseType').valueChanges.subscribe(value => {
     this.licenseChange(value, this.form.get('price'));
     //....Others
}

licenseChange(licenseValue: any, control: AbstractControl) {
    licenseValue === 2 ? control.setValidators([Validators.required]) : control.clearValidators();
    control.updateValueAndValidity();
}

在多个字段的 Angular 中设置验证器

Setting validators in Angular on multiple fields

angular-reactive-forms

angular5