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

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 3

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

我使用条件验证器：

Dim rs As New OdbcCommand("", con)
With rs
    .CommandText = "Insert into tblholidays (Holiday,Date,Comment) values (@Holiday,@date,@Comment)"
    .Parameters.AddWithValue("@Holiday", txtholiday.Text)
    .Parameters.AddWithValue("@date", dtpicker1.Value.ToString("yyyy-MM-dd"))
    .Parameters.AddWithValue("@Comment", txtcomment.Text)
    .ExecuteNonQuery()
End With

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

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)]]}是条件函数（关闭）的地方

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

不幸的是，Angular目前没有removeValidator功能。您所要做的就是将验证器重置为没有要删除的验证器，因此您需要知道要保留的验证器，而不是要删除的验证器。所以这个：

this.form.get('title').setValidators([Validators.minLength(3), Validators.maxLength(50)]);

离移除功能最近的地方。您无法访问formcontrol上的当前验证器来尝试编写自己的remove函数。您可能要做的最好的事情就是编写自己的表单控件验证管理器类，该类可以跟踪给定控件上的验证器并为您管理它们。

Answer 6

我在将条目保存为草稿时遇到了同样的问题，并准备了以下解决方案：

@Component({
    // ...
})
export class FormComponent{
    form: FormGroup;

    constructor(private fb: FormBuilder){
        this.form = this.fb.group({
            name: ['', Validators.required, Validators.maxLength(20)],
            description: ['', Validators.required, Validators.maxLength(200)],
            address: this.fb.group({
                line1: ['', Validators.required, Validators.maxLength(100)],
                line2: ['', Validators.maxLength(100)]
            })
        });
    }    

    validateDraft(formElement: FormGroup | FormArray | FormControl): boolean {
        let result = true;

        Object.keys(formElement.controls).forEach(field => {
            const control = formElement.get(field);

            if(control instanceof FormControl) {
                control.markAsTouched({ onlySelf: true });

                if(control.errors && control.errors['required']) {
                    control.markAsUntouched({ onlySelf: true });
                }
                else if(control.invalid) {
                    result = false;
                }
            } else if (control instanceof FormArray) {
                if (!this.validateDraft(control)) {
                    result = false;
                } 
            }else if (control instanceof FormGroup) {
                if (!this.validateDraft(control)) {
                    result = false;
                }   
            }
        });
    }

    saveDraft(){
        if(this.validateDraft(this.form)){
            //save draft - ignore required errors
        }
    }

    save(){
        if(this.form.valid){
            //save
        }
    }
}

Answer 7

要添加验证者：

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

或

this.form.get('title').setValidators([Validators.required,Validators.minLength(3), Validators.maxLength(50)]);

要仅删除“必需”验证器，可以重置验证器。

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

updateValueAndValidity 确定更改值和验证器时控件如何传播更改并发出事件

Answer 8

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

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

Answer 9

使用空数组删除所有现有的验证器。

this.frmFeasibility.controls['pop_name'].setValidators([]);
this.frmFeasibility.controls['pop_name'].updateValueAndValidity();

Answer 10

您可以使用它从反应形式中清除验证

this.form.controls ['title']。clearValidators（）; this.form.controls ['title']。updateValueAndValidity（）;

您可以使用它以反应形式添加验证

this.form.controls ['title']。setValidators（[Validators.required]）; this.form.controls ['title']。updateValueAndValidity（）;

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

10 个答案: