Dynamically adding or removing form control validators in reactive form 

I have same question.. Venkar sir.., Can you please update this?

because email always required, this example difference from the example he explained in template driven form

Hello Mohan - Email is mandatory and always required, where as on the other hand phone is required only if phone radio button is selected. However, if you want the email field to be required, only if email radio button is selected and if you want the phone field to be required, only if phone radio button is selected, then modify the code in onContactPrefernceChange() method as shown below. Hope this answers your question. onContactPrefernceChange(selectedValue: string) { const phoneControl = this.employeeForm.get('phone'); const emailControl = this.employeeForm.get('emailGroup').get('email'); if (selectedValue === 'phone') { phoneControl.setValidators(Validators.required); emailControl.clearValidators(); } else { phoneControl.clearValidators(); emailControl.setValidators(Validators.required); } phoneControl.updateValueAndValidity(); emailControl.updateValueAndValidity(); }

Hi I am following your tutorial and they are really good. I really appreciate your effort. When we have two validators defined for { email : ['', [Validators.required, Validators.email] ] } If user preferred type is "Phone" I won't need the "Required Validator", But i will still need "Email Validator". ClearValidators() method will fail and remove both "Required and Email validator". onContactPrefernceChange(selectedValue: string) { const phoneFormControl = this.employeeForm.get('phone'); const emailFormControl = this.employeeForm.get('email'); if (selectedValue === 'phone') { phoneFormControl.setValidators(Validators.required); emailFormControl.clearValidators(); } else { phoneFormControl.clearValidators(); emailFormControl.setValidators([Validators.required, Validators.email]); // [modified but does not work] } phoneFormControl.updateValueAndValidity(); emailFormControl.updateValueAndValidity(); } Thank you,

Had to add this inside if (selectedValue === 'phone') { phoneFormControl.setValidators(Validators.required); emailFormControl.clearValidators(); emailFormControl.setValidators(Validators.email); // added } else { phoneFormControl.clearValidators(); emailFormControl.setValidators([Validators.required, Validators.email]); / added } is this a good practise ? or is there other method in which i wont have to be repetitive ?

Try this: if(selectedValue === 'phone') { phoneControl.setValidators(Validators.required); phoneControl.markAsTouched(); }

you can try this below, it works perfectly onContactPreferenceChange(contact: string) { const phoneControl = this.employeeForm.get('phone'); const emailControl = this.employeeForm.get('email'); if (contact === 'phone') { phoneControl.setValidators(Validators.required); emailControl.clearValidators(); emailControl.updateValueAndValidity(); } else if (contact === 'email') { emailControl.setValidators(Validators.required); phoneControl.clearValidators(); phoneControl.updateValueAndValidity(); } phoneControl.updateValueAndValidity(); emailControl.updateValueAndValidity(); }

remember to change my contact variable to selectedValue on the method parameter.