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.
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.
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.
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(); } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With