6

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

description:  ['', Validators.required]

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

if(true){descReq = true};

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

4

4 回答 4

8

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

    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();
        }
      });
    }
于 2017-02-15T00:58:41.100 回答
0

如果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)]

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

reqd = { required: false };
于 2017-02-15T00:38:37.067 回答
0

您可以简单地使用Validators.requiredTrue

description: [false, Validators.requiredTrue]

于 2020-11-12T10:05:59.520 回答
0

您应该在字段上设置验证器命令式与声明式。

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

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

势在必行：

const description = new FormControl('');
if (someCondition) {
  description.setValidators(Validators.required);
}
于 2017-02-15T01:34:34.003 回答