Question

我正在尝试使用Validators更新表单字段的简单方法。现在我做以下事情：

 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
    }       
}

这是添加和更新验证器的唯一方法，还是有其他方法可以实现此目的。现在我在设置/清除每个字段后调用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中设置验证器

2 个答案: