Radio Button Validation Made Easy

Form radio affidavit

this is part 20 of angular crud tutorial in this video we'll discuss radio buttons validation with an example here is what we want to do we want to make this gender field a required field if none of the radio buttons are selected we want to display this validation error message gender is required as soon as we select one of the radio buttons the validation error message should disappear notice on our create employee form we have the gender radio buttons right here at the moment this field is not a required field and to make it a required field let's include a required attribute on both these radio buttons so let's flip over to visual studio code here is the male radio button let's make it required by including the required attribute along the same lines let's make the female radio button also required next let's create a template reference variable let's name it gender let's do the same thing with our female radio button as well next we are going to use bootstrap to style the validation error messages we are going to use this agenda template reference variable in our class binding so on this development we are going to use a class binding and this is how the class binding looks like so if the gender field is touched and if it is invalid then we want to add this bootstrap CSS class has error to this development that has the form group class on this label element that displays the static text gender we are going to use another bootstrap class and that is control label class they using this class to style the field text which is gender in this case finally we have to display the validation error message itself for that they're going to use this span element notice the ng if structural directly right here if the gender field is touched and if it is invalid then this panel element that displays the validation error message is added to the Dom otherwise it is removed as you can see validating radio buttons is very similar to validating text boxes we discussed validating text boxes you know this video first we include the validation attributes like required min length pattern etc on the field that we want to validate and then we create a template reference variable by exporting the ng model directive we then use that template reference variable in the class binding and then on this pan element that actually displays the validation error message so let's save our changes and then take a look at the browser notice we have our gender field right here but we don't see the validation error message that's because for the validation error message to show up both these conditions must be true that gender field must be touched and it must be invalid we know at the moment the gender field is invalid because we made both these radio buttons...