Angular Reactive Forms Validation Example

[Music] in this project I am going to create an angular reactive form this is the final output of this project as you can see the form will check whether the user entered in a valid email or not if she was rendered an invalid email it will show an alert in this form I added validations for every field name is required in form field only digits are allowed and a minimum length is 10 if you had anything other than number it will show an alert and the form become invalid in message also I added a minimum length the message should contain at least 10 characters send a message button will only get activated after you surrender all valid details this will prevent yourself from submitting the form before entering all the details when you sir click the send message button all the details will be saved and we will clear the form you can see the details on console all the details are printed inside the console you can download this in their project the link is given in the description ok let's start creating this project already created in HTML template and I added some CSS classes so that we can focus more on the angular part I'm going to run this project it's type ng cell open this project as you can see I created an HTML form no functionality is added to this form just CSS and HTML I am going to show you how to add all this functionality using angular just go to app dot model to TS we are going to add a reactive form model instead imports and we also need to import a reactive form model from angular forms now go back to after component dot HTML instead form tag add form drop attribute and set to the value as ex4 it's the name of the form group inside nave input add firm control name equals name you can give anywhere do you like to deform control name inside email input add form control name equals email similarly in cell phone add form control name equals fall we use a text area for message so inside exterior tag add firm control name equals message now go to app dot component or TS and a remove this title variable next step is to add a corn in it and importer only need from angular core now create an NGO Nannette function now create a new variable called ex4 and i say in the type of form group and import form group from angular forms go to F dot component dot HTML as you can see we already given the value of form group as ex4 go back to app dot component ideas and inside ng own init create a new form group by typing this dot ex4 mystical to new form group extra step is to add form controls inside form group first add a name from control type name new form control null and where later we're importer form control import from control from angular forms also import we're late s also from angular forms go to Epcot component HTML we already added form control name equals name well it is not required is a built-in validator you can find different validators in the official documentation there are different world it is if you use the required field cannot be empty some value is required there are also other validators such as email and minimum length etc you can find all this well data inside this whole field augment page go back to vs course and let's run this project open this project nothing is staged now we are going to change the value null to some string let's type my name this is the default value for this field now open the browser again you can see the default value of this field is my name will crush the project you can see my name is not gone I'll go to be escort change this value back to null ad next form control type he made new phone control null validated required and validator email there are to validate is for email when is required and other his email email well later we'll check whether it's an email or not if you are using more than one well later you should put that inside an RA the mail we table here is the form controlled name of the input field go back to a plot component or PS we need to add two more form controls first one is full form field it's similar to email field only difference is the validator we are using a different way later here it's called pattern well later first I am going to split to this code into few more lines again said this pattern well later we can add a regular expression this regular expression will check whether they you surrendered a valid phone number or not if you are not familiar with regular aspersions please google a regular expression and you can find a lot of different documentation and tutorials next we are going to add a controller for message field it's similar to other form controls only difference is the minimum length the validator we are going to add a default oval later in a mum length mean length the 10 means the field required at least 10 characters and the row is it will be invalid now run this project everything is working extra step is to show this alert according to the validity of this phone go back to rias code to have dot component or death table inside the name alert type and JE vehicles X form dot get the name not invalid if it name field became invalid this condition becomes pool and they had the alert will be shown X form is the name of this form and the name is the form control nail run this project let's type something in the name field as you can see the alert disappear when I start to type something in this name field but they initially the alert is showing we don't need to show the alert at the beginning so we need to update our condition a little bit let's add an end and type X form not get name not pet-sit this means that only this condition will work after default with pets so the alert will not be shown initially let's run this project one more time as you can see now the alert is not showing only after touching the name field the alert starts to appear now go back to his code we need to add this every field so copy the ng of condition and add that to the email field change the nail to email email is the form control name also changed his name to email now add the NDF condition to warn alert and detailing to name your form you here also change name to fall you Forrester control name now we had same you message field painter named to miss eight okay now run this project again as you can see all the alert are now gone Alette only appears after we patch the field this email field will check whether it's any valid email or not if you surrendered an invalid email will show error as you can see it is taking order it's an email you you in formfield only digits are allowed if we endure anything other than digits it will show the error this field required minimum ten digits next appeal is the message field we already set the minimum length for massage field as 10 so we have to type at least 10 characters next we are going to disable this send the message about that and enable it to only after you surrender all valid details so go back to the s code and inside this button add a disabled equals x1 dot invalid xform dot invalid becomes true the button will get disabled that means whenever they phone get invalid the button get disabled initially the form is invalid so the button is now disabled I am going to fill this form with valid values but then will be only get enabled after up and doing all valid values you you now you can see the button is now enabled this way user can only submit the button after entering all the right values any failed became invalid they button will get disabled now go back to here Scott next step is to add a click event I'm going to add a click event inside this button whenever you sell click this button click super method will get cold you open out dot component or TS again now I am going to create that click stop method so type clicks up inside this method we are going to log all the values from the form ix forum is the name of the forum and dollar value will extract all the values from the forum next we are going to reset this fall dot reset function will reset all the values in this forum will go back to Google Chrome I'm going to type some dummy values after enduring this value click send a message and let's inspect the console in the console we can see that all the values from the forum are printed as an object and we can retrieve this value and ascended to the back end I forgot one thing let's add some CSS styling go to app got component dot CSS and a type form controller dot ng Pecha dot and g invalid border one pixel solid red if ng is valid then change the color to green when form is invalid angular add ng invalid class to the text field and if the form is valid it's a danji valid so we change the color from red to green if it's valid we add green and if it's invalid we add a rat the form controller is the class we added to each input field it's a bootstrap class to select this class we use not a phone control if you ever used to the bootstrap you're already familiar with today form control us he gives his tail to text input form is invalid and he was up at just this form ng that render engine while it is added and an NG valid is added when the form is valid so we use this classes to give this extra style when we touch under the field is invalid it will give a red border to the text field when the field become valid the red color changes to green this three classes ng Petzl and engine valid and G valid are all added by angular itself we are not adding any class we are this using this classes to select text field and give additional styles such as the border color you can also add additional styles let's go back to the app component or HTML still we are going to shorten this NDF cord as you can see it's a long and if statement we are going to move some of this code to have got component or the tears for that we are going to create some new methods customer that is named method and we are going to retain some values type return and go back to upload component or HTML and a COPI xform dot get the name and paste it after the return so this that will return the xform dot get name now in ab god Cumberland dot html' replace this with the name she also you can replace it with the name method it just created the code was never changed you just murder some of this code into the app load component or yes actually copied this method and paste it below and we changed the name to email also here we change the name to email and go back to HTML here we replace this with the email method here also we replace this with email we need to repeat the same process for all the field now change email to phone here also changed to phone and go back to HTML and replace this with the phone method here also replace it with the default method now do the same to message field let's create a message method and in the HTML let's replace they do with the message method you now run this app go back to the browser let's quickly type some values and check everything is working working thank you for watching this video you you you [Music]

Channel: coderspirit

Views: 12,902

Rating: 4.8829269 out of 5

Keywords: Angular, Angular Reactive Form, phone no, email, Validation, angular 8, angular 9, tutorial, angular reactive forms, forms, form, reactive forms, 2020

Id: s9fAysnpiZ0

Length: 23min 17sec (1397 seconds)

Published: Tue Mar 17 2020