Angular 4有条件地删除所需的验证器

Question

在Angular 4应用程序中,我有一个这样的表单模型:

this.form = this._fb.group({
    title: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
    description: ['', [Validators.required, Validators.minLength(3)]]
});

现在我想要的是从控制验证器数组中仅动态删除所需的验证器.像这样的东西:

saveDraft() {
    this.form.controls['title'].removeValidator('required'); //Just a fake implementation for demonstration
}

这个问题不是上述问题的重复.我的情况不同我只想在不知不觉中删除所需的验证器.

Answer 1

如果你想添加验证,试试这个.

saveDraft() {
   this.form.get('title').setValidators([Validators.required, Validators.minLength(3)]);
   this.form.get('title').updateValueAndValidity();
}

如果你想删除验证器,试试这个.

saveDraft() {
 this.form.get('title').clearValidators();
 this.form.get('title').updateValueAndValidity();
}

Answer 2

我不喜欢清除和设置验证器，因为我必须重复所有静态验证器（模式、最小值、最大值等）才能获得动态的“必需”验证器。

我使用条件验证器：

export function conditionalValidator(condFn: (control: AbstractControl) => boolean,
validators: ValidatorFn | ValidatorFn[]): ValidatorFn {
  return (control) => {
    if (!condFn(control)) {
      return null;
    }

    if (!Array.isArray(validators)) {
      return validators(control);
    }

    return validators.map(v => v(control)).reduce((errors, result) =>
      result === null ? errors :
        (Object.assign(errors || {}, result))
    );
  };
}

然后，我可以将静态验证器与动态“必需”条件混合使用：

this.fb.group({name: ['', [Validators.minLength(4),
                 conditionalValidator(this.isClientProj, Validators.required)]]}

isClientProj()条件函数在哪里（闭包）

Answer 3

我们可以使用它setValidators来删除验证。

setValidators(newValidator: ValidatorFn | ValidatorFn[]): void

setValidators() - setValidators 以编程方式添加同步验证器。此方法将删除所有先前添加的同步或异步验证器。

this.form.get('title').setValidators(null); 
this.form.get('title').setErrors(null); 

Answer 4

this.fromName.get("formControlName").setValidators([Validators.required]);//setting validation
this.fromName.get("formControlName").setErrors({'required':true});//error message
this.fromName.updateValueAndValidity();//update validation


this.fromName.get("formControlName").clearValidators([Validators.required]);//clear validation
this.fromName.get("formControlName").setErrors(null);//updating error message
this.fromName.updateValueAndValidity();//update validation

Answer 5

您可以使用： AbstractControl.removeValidators(validator: ValidatorFn)

不确定在 Angular 4 中是否可行，但在 Angular 12 及更高版本中肯定可行。

然而，它需要对完全相同的函数的引用。仅仅给它 Validators.required 是行不通的。您需要创建对其的唯一引用：

requiredValidator = Validators.required;
   
this.form = this._fb.group({
    title: ['', [this.requiredValidator, Validators.minLength(3), Validators.maxLength(50)]],
    description: ['', [this.requiredValidator, Validators.minLength(3)]]
}); 

saveDraft() {
    this.title.removeValidators(this.requiredValidator); 
}

get title(): AbstractControl {
    return this.form.get('title');
}