角度反应形式设置和清除验证器

Sil*_*lva 6 angular angular-reactive-forms

请协助,我想删除表格中的所有验证人,请告知是否可能,如果您有表格组20或更多表单控件,如果不是更好的方法删除验证器,请参阅下面的示例.

 ngOnInit() {
    this.exampleFormGroup = this.formBuilder.group({
     surname: ['', [Validators.required, Validators.pattern('^[\\w\\s/-/(/)]{3,50}$')]],
     initials: ['', [Validators.required, Validators.maxLength(4)]]
     });
  }

 public removeValidators() {
    this.exampleFormGroup.get('surname').clearValidators();
    this.exampleFormGroup.get('initials').clearValidators();
    this.exampleFormGroup.updateValueAndValidity();
 }

 public addValidators() { 
  this.exampleFormGroup .get('surname').setValidators([Validators.required,Validators.pattern('^[\\w\\s/-/(/)]{3,50}$')]);
  this.exampleFormGroup.get('initials').setValidators([Validators.required, Validators.maxLength(4)]);
  this.exampleFormGroup.updateValueAndValidity(); 
 }
Run Code Online (Sandbox Code Playgroud)

上面的方法addValidators()将添加验证器,并removeValidators()在执行时删除验证器.但我遇到的问题是,我必须指定表单控件我试图清除验证器.有没有办法this.exampleFormGroup.clearValidators();在表单中完成并清除所有内容并再次this.exampleFormGroup.setValidators()将其设置回来.我知道我可能会要求一个独角兽,但在formGroup有20个或更多控件的情况下,清除和设置验证器可能会很痛苦,因此非常感谢如何处理这些场景的地图.

Unl*_*yAj 17

你可以这样做:

validationType = {
'surname': [Validators.required, Validators.pattern('^[\\w\\s/-/(/)]{3,50}$')],
'initials': [Validators.required, Validators.maxLength(4)]
}

ngOnInit() {
    this.exampleFormGroup = this.formBuilder.group({
     surname: ['', [Validators.required, Validators.pattern('^[\\w\\s/-/(/)]{3,50}$')]],
     initials: ['', [Validators.required, Validators.maxLength(4)]]
     });
  }

public removeValidators(form: FormGroup) {
    for (const key in form.controls) {
         form.get(key).clearValidators();
         form.get(key).updateValueAndValidity();
    }
}


public addValidators(form: FormGroup) {
        for (const key in form.controls) {
             form.get(key).setValidators(this.validationType[key]);
             form.get(key).updateValueAndValidity();
        }
}
Run Code Online (Sandbox Code Playgroud)

  • 很好的答案。我有同样的问题。`form.get(key).clearValidators(); form.get(key).updateValueAndValidity();`解决了我的问题。注意:如果有人调用“form.valueChanges.pipe().subscribe(...)”内部的方法并且仍然在其中进行更改,请记住设置“form.get(key).updateValueAndValidity({withEvents: false” })`,否则会陷入无限循环,导致堆栈溢出问题。 (2认同)