Dynamically adding or removing form control validators in reactive form

this is part 14 of angular 6 tutorial in this video we'll discuss how to add or remove validators dynamically at runtime in a reactive form let's understand this with an example here is what we want to do we want to include these to contact preference radio buttons email and phone if I select email as the contact preference then this phone input field is optional if I change my contact preference from email to phone then this phone input field is required this means based on the user selection that is if the contact preferences phone then add required validator function on the phone form control if the contact preference election is email then remove the required validator function from the phone form control so we have to add or remove the required validator function dynamically from this phone form control based on what the user selects for contact preference field first let's include the required HTML for this phone input element it's going to be very similar to the email input element here is our email input HTML let's make a copy of this and then change the bits that are required the property name on the form errors object should be phone instead of email we don't have this phone property on the formatter so object will create that in just a bit the label text here should be phone along the same lines this for attribute should also be phone input element ID here form control name property on the form errors object here and here next let's look at the changes required in the component class first let's include this phone property on the form errors object now in this employee form from group we need to include a firm control for the phone input element the default value is an empty string notice on our email phone control we have required validate a function but we are not going to include that on our phone form control that's because the default contact preference value is email when the contact preferences email of a phone input element is optional so it makes sense not to include the required validator function on our phone form control at design-time next we need to include this phone is required error message within our validation messages structure let's change the key to phone and the message to phone is required next let's include the required HTML for these to contact preference radio buttons our contact reference radio buttons are going to be very similar to these proficiency really buttons so let's make a copy of these buttons and then change the bits that are required we want the to contact preference radio buttons after full name input element so just after full name HTML let's paste the copied HTML we don't need this ng class binding so let's delete that and the label text is contact preference the value on our first radio button is email form control name is contact preference and the radio button text is email we don't need to bind to the blur event so let's get rid of that let's make a copy of this radio button and change it to phone the text is phone form control name is still contact preference and the value is phone we only need two radio buttons today's phone and email so let's get rid of the other advanced radio button now in our component class we need to include a phone control for contact preference the name for the form control is contact preference and we want the default value to be email at this point let's save our changes and take a quick look at the browser notice on the initial page load the contact preference default value is email now when we change this to phone we want to set a required validator on this phone form control if the selection changes back to email we want to remove that required validator so we want to dynamically add or remove the required validator on this phone form control now whenever the value of this contact preference form control changes that is from email to phone or from phone to email we want to know about it so let's bind to the click event of these two radio buttons when the radio button is clicked let's call a method on our component class I'm going to name it on contact preference change and to this method we are going to pass the value of this radio button which is email now let's do the same thing on the phone radio button but the value that we pass is going to be phone instead of email next we need to include this on contact preference change method within our component class now we know this method is going to receive the selected radio button value as a parameter so let's name the parameter selected value and the datatype for this string that is phone or email so if the selected value is phone then we want to add a required validator on the phone form control if it is email then we want to remove that required validator this can be very easily achieved by using these three functions these functions are in the abstract control class but we already know both form group and form control classes derived from the abstract control class this means the form control class also has access to these three functions first let's get a reference to a phone form control and store it in a constant let's call the constant phone control and to get the reference of the phone form control we use our route form group which is employee form on that we call the get method and to the get method we pass the name of our phone form control now if the selected value is phone what do we want to do we want to add the required valid data to of a phone form control for that we are going to use set validators function and this function we pass the required validator and we know required validator is present in this validators class on the other hand if the selected value is not phone then we want to remove the required validator for that we use clear validators function now notice in addition to set validators and clear validators we also have this third function update value and validity so what's the use of this function well as the name implies set validators and clear validators are going to either set or clear validators from a form control they do not trigger validation now after you have set our cleared validators on a form control if you want the validation for that form control to be immediately triggered then you have to call this update value and validity function on that form control so on our phone form control after setting or clearing validators let's call update value and validity note on the initial page load the default contact preference value is email at this point if I attach the phone field and leave it we don't get the required error if I change the contact preference to phone I immediately get the required validation error if I change it back to email the validation error disappears at the moment we are setting one valid data using this set validators method but what if we want to set multiple validators well that's when we use the erase index and then include all of our validators as part of this array for example let's say in addition to required validator we also want to set min length validator so we include min length also as part of this array but in our case we only want the required validator so let's remove the array syntax at the moment to detect and react when contact preference form control value changes we are binding to the click event of these two radio buttons that is email and phone but if you want your code to be more easily unit testable then having these click event bindings in the HTML is not really preferred so let's remove these two bindings now the question is from our component class code how to detect when the contact preference form control value changes from phone to email or vice versa well if you remember in part 10 of this video series we discussed value change is observable if we subscribe to the value changes observable of a form control and every time the value of the form control changes and even will be emitted and will be notified and we can react to those changes so let's subscribe to the value changes absorb all of our contact preference of form control let's do that within our ng on a net life cycle hook on our employee form a route form group let's use the get method and get a reference to our contact preference form control and subscribe to its value changes observable so every time the contact preference form control value changes this method is called and the changed value is passed as a parameter let's call the parameter data and the type for this is going to be string because the value will change either from phone to email or vice versa so whenever the value changes we want to call this on contact preference change method and pass that change data notice even now our application works exactly the same way as before here is our own contact preference change method this method sets our clears the required validator on our phone form control dynamically at runtime that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 45,823

Keywords: angular reactive forms add validation dynamically, angular reactive forms dynamic required, angular reactive forms dynamic validation, angular reactive forms conditional required, angular reactive forms required if, angular reactive forms validation on blur, angular reactive forms clear validation, angular reactive forms force validation, angular reactive form trigger validation manually, angular reactive form set validator

Id: BP6E4rW5EPA

Length: 11min 14sec (674 seconds)

Published: Mon Oct 15 2018