Angular 2中的条件验证

Angular 2中的验证非常简单，非常棒。但是，如果选择了其他字段，那么如何使必填字段可选。Angular 2中的条件验证

这里是我的规则

this.contractsFilter = this.fb.group({ 
    selectedContractType: ['', [Validators.required]], 
    selectedYear: ['', [Validators.required]], 
    selectedPde: ['', [Validators.required]], 
    refNo: ['', []] 
});

我希望其他领域的要求被标记“非必需”如果引用号是由用户提供的。

来源

2017-07-17 Cengkuru Michael

这里是你如何可以动态添加或删除验证一些控制

private addValidator(control, validator) { 
    let existingValidators = control.validator; 
    control.setValidators(Validators.compose([existingValidators, validator])); 
    control.updateValueAndValidity(); 
    }

，并删除验证

private removeRequiredValidator(control, otherValidators) { 
    control.clearValidators(); 
    if (otherValidators) { 
     control.setValidators(otherValidators); 
    } 
    control.updateValueAndValidity(); 
    }

来源

2017-07-17 06:59:27 umar

利用setValidators来设置表单控件警戒/解除警戒验证

import {FormControl, Validators, FormGroup} from "@angular/forms"; 

onRefNoEntered() { 
     if(this.contractsFilter.controls['refNo'].value && this.contractsFilter.controls['refNo'].valid) { 
      this.contractsFilter.controls['selectedContractType'].setValidators(null); 
      this.contractsFilter.controls['selectedYear'].setValidators(null); 
      this.contractsFilter.controls['selectedPde'].setValidators(null); 
     } 
     else { 
      this.contractsFilter.controls['selectedContractType'].setValidators(Validators.required); 
      this.contractsFilter.controls['selectedYear'].setValidators(Validators.required); 
      this.contractsFilter.controls['selectedPde'].setValidators(Validators.required); 
     } 
}

来源

2017-07-17 07:47:10

使用自定义验证器和setValidators可能会非常迅速地变得非常复杂。我更愿意配置验证器，因为它们可能是必需的，然后有条件地启用或禁用它们。

究竟使用代码：

this.contractsFilter = this.fb.group({ 
    selectedContractType: ['', [Validators.required]], 
    selectedYear: ['', [Validators.required]], 
    selectedPde: ['', [Validators.required]], 
    refNo: ['', []] 
});

然后，我会订阅valueChanges为refNo：

this.contractsFilter.controls['refNo'].valueChanges.subscribe(value => { 
    if (value) { // There is a refNo specified 
    this.contractsFilter.controls['selectedContractType'].disable(); 
    this.contractsFilter.controls['selectedYear'].disable(); 
    this.contractsFilter.controls['selectedPde'].disable(); 
    } else { 
    this.contractsFilter.controls['selectedContractType'].enable(); 
    this.contractsFilter.controls['selectedYear'].enable(); 
    this.contractsFilter.controls['selectedPde'].enable(); 
    } 
});

现在你的校验都在一个一致的地方规定，你仍然可以控制是否验证器是否执行。

来源

2017-10-31 13:49:47

Angular 2中的条件验证

回答

相关问题