Angular 2 中的条件验证答案

【问题标题】：Conditional validation in Angular 2Angular 2 中的条件验证
【发布时间】：2017-07-17 06:43:11
【问题描述】：

Angular 2 中的验证非常简单，非常棒。但是，如果选择了其他字段，如何将必填字段设为可选。

这是我的规则

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

如果用户提供了 refNo，我希望标记为必需的其他字段为“非必需”。

【问题讨论】：

标签： javascript angular validation

【解决方案1】：

这里是你如何动态添加或删除验证器到某个控件

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();
  }

【讨论】：

【解决方案2】：

自定义验证器和setValidators 的使用都会很快变得非常复杂。我更喜欢根据需要配置验证器，然后有条件地启用或禁用它们。

完全使用您的代码：

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

然后我会为refNo订阅valueChanges：

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();
  }
});

现在您的验证器都指定在一个一致的位置，您仍然可以控制是否执行验证器。

【讨论】：

【解决方案3】：

利用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);
        }
}

【讨论】：

【解决方案4】：

我遇到了类似的问题，并受到this solution 的启发，做了这样的事情：

const control = new FormControl(null, 
    [this.conditionalValidator(Validators.required)], 
    [this.conditionalAsyncValidator(this.validatorService.customAsyncValidator(params))] );

private conditionalValidator(validator: ValidatorFn): ValidatorFn {
    return (control: AbstractControl): ValidationErrors  => {
        if(this.condition) {
          return null;
        }
        return validator(control);
    }
}

private conditionalAsyncValidator(validator: AsyncValidatorFn): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors> | Promise<ValidationErrors> => {
        if(this.condition2) {
            return observableOf(null);
        }
        return validator(control);
    }
}

【讨论】：