Angular 2：在某些条件下应用 Validator.required 验证答案

【问题标题】：Angular 2: Apply Validator.required validation on some conditionAngular 2：在某些条件下应用 Validator.required 验证
【发布时间】：2017-07-03 11:31:07
【问题描述】：

我有一个 angular 2 表单，其中我必须在某些条件下创建一个所需的字段，例如：

description:  ['', Validators.required]

此描述字段仅在某些类型的条件下是必需的，例如：

if(true){descReq = true};

我怎样才能做到这一点，请提出建议。提前致谢！

【问题讨论】：

其他条件是什么？

标签： angular angular2-forms angular-reactive-forms angular-forms

【解决方案1】：

您可以根据表单上另一个控件的值添加或删除验证器：

    testForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {
      this.testForm = this.formBuilder.group({
        condition: [''],
        description: ['']
      });

      this.testForm.controls['condition'].valueChanges.subscribe(result => {
        if (result) {
          this.testForm.controls['description'].setValidators(Validators.required);
          this.testForm.controls['description'].updateValueAndValidity();
        } else {
          this.testForm.controls['description'].setValidators(null);
          this.testForm.controls['description'].updateValueAndValidity();
        }
      });
    }

【讨论】：

【解决方案2】：

如果descReq 需要在运行时进行评估（而不是在初始化时），那么也许您应该创建一个自定义验证器：

import { ValidatorFn, AbstractControl } from '@angular/forms';
interface ValidationResult {
    [key:string]:boolean;
}
function customValidator(condition: { required:boolean }) {
     return (control: AbstractControl) :ValidationResult  => {
         return condition.required && 
             (control.value == undefined || 
              control.value == null || 
              control.value.trim() =='') ? 
              {
                 'required': true
              }: null;

       }

}

这样使用：

description:  ['', customValidator(this.reqd)]

reqd 已被较早初始化，甚至可能是数据绑定的：

reqd = { required: false };

【讨论】：

感谢您的回答，但它给我一个错误：'错误：错误：0：0 导致：无法读取未定义的属性'必需''
你需要初始化this.condition
在构造函数中初始化。我控制台在构造函数和 required() 方法中记录了 this.condition。它在构造函数中初始化，但在方法内部给出 undefined。
啊，我的错。是的，像这样传递一个 fn 引用会改变this 的含义。我已将其更新为工厂功能 - 应该可以工作。
条件改变时方法不会被调用。就像条件从 false 变为 true 时一样，应该调用此函数。在这种情况下不会发生？

【解决方案3】：

您应该在字段上设置验证器强制 vs 声明式。

以声明方式（您当前的代码）：

const description = new FormControl('', Validators.required);

当务之急：

const description = new FormControl('');
if (someCondition) {
  description.setValidators(Validators.required);
}

【讨论】：

【解决方案4】：

您可以简单地使用 Validators.requiredTrue

description: [false, Validators.requiredTrue]

【讨论】：