Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular reactive forms set and clear validators

Tags:

Please assist, i want to remove all validators in form, Please advise if its possible or not and if not whats the better way to remove validators if you have a form Group of 20 or more form controls, see example below.

 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();   } 

The above method addValidators() will add validators and removeValidators() will remove validators when executed. but the problem i have is, i have to specify the form control im trying to clear validators. is there a way to just do this.exampleFormGroup.clearValidators(); and clear all in the form and again this.exampleFormGroup.setValidators() to set them back. i know i may be asking for a unicorn but in a scenario where the formGroup has 20 or more controls clearing and setting validators can be painful so a map on how to handle such scenarios will be much appreciated.

like image 889
Silva Avatar asked Jul 12 '18 08:07

Silva


People also ask

How do I add custom validators dynamically in reactive form?

We can add Validators dynamically using the SetValidators or SetAsyncValidators. This method is available to FormControl, FormGroup & FormArray. There are many use cases where it is required to add/remove validators dynamically to a FormControl or FormGroup.

What is the use of updateValueAndValidity?

When you add or remove a validator at run time, you must call updateValueAndValidity() for the new validation to take effect. Adding a validator that already exists will have no effect. If duplicate validator functions are present in the validators array, only the first instance would be added to a form control.


1 Answers

You can do something like this:

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();     } } 
like image 195
Akj Avatar answered Oct 20 '22 05:10

Akj