Angular Live - 4 | Angular Forms Tutorial For Beginners | Angular Training | Edureka

hello everyone so today we are about handling the forms in angularjs angular forms types of from angular contains two type of forms template driven forms and another one is react firms template driven firms will contain forms model data flow how the data will be followed and forms directive all these are part of your template driven form template event form is nothing but the form which can be manipulated inside your HTML mu is nothing but a template over phone what is reactive form reactive form is something which is being implemented a form can be created a form fields can be manipulated inside the type script so what it contains a form contains form model the data data how the data will be flow when the user enters the data or when you change something in the model it has to display it in the view react to directives what kind of directives are available dynamically adding data to your form how do we add a data to the form dynamically these are the things which are going to cover it along with that we will also cover form validations angular forms they clearly says angular forms water forms pumps are used to handle user inputs this is very very important unit to understand forms are used to handle the user inputs they are the main building blocks to gather or capture and process the data provided by the users now go to any simple example Facebook which I always take it so if you click on it facebook.com whatever what do we see here you might I will enter my first name John David so maybe you know 8 7 8 9 something new password ABC XYZ and my date of birth I will choose mail see all these are called form fields what is the use of these follicles it is used to gather or capture or update the data entered by the user in this case if I say sign up we are capturing the data entered by the end user and submitting it to the next processing page when you submit this data it will be sent to a processing page wherein that data will be read it and store it in the database or we take a some action based on the user data entered by you so sometimes if I don't enter first name last name then you I try to sign-in what happened it clearly says what is your name that means name is a mandate repeat surname is a mandatory field so these are called ribbons our error messages we are applying some form of validations any specific reason why we need to apply validation if you don't apply a validation you are going to submit the data to the server and from the client assume I don't enter first name and last name earlier ten years back how firms were using I will click on a button called sign up the data will be sent then you know server while processing it it will read the fields from field and it realized that there is a first name there is no last name entered by user then again server has to send an error message saying that buzz you forgot to enter first name last name again the entire page has to reload and show error message this is how the legacy way of creating affirms but now with the angular or with the Ajax feature now everything can be handled by client before you send the final data to the server you can validate here on the client side using a bootstrap JavaScript jQuery or angular to validate the form to make your form more dynamic and display the corresponding messages on the client once the client is aware that you know all the data entered by user is write values then write means as per the pattern maybe see this mobile number should have 10 digit I cannot enter one two three four five six one day it will throw an error because it requires ten digits number same way password should be must be you know start with the number or capital letter one capital letter one a a special character exclamation something like that you can put a rules first name should not accept a numbers surname should not accept numbers something like that all these rules you can apply on the client side that is what they are talking about forms are used to handle user input they are the main building blocks to gather capture and process the data provided by the users where do we process we process it on the server first we will make sure on the client it is everything is valid they are used to the forms or user to log in submit the request place an order book a flight ticket fry ticket also form fields you choose a flight to and from price and a seed and so many things he will choose them and submit it booking your flight dealing a meeting and perform other data entry tasks those are called forms so you can seach her an example they give how does angular handles our forms generally we can submit a form directly to the server but since we are recreating a single page application we cannot submit the form directly ensure we handle the form through angular page angular HTTP service can be used to submit the form data to the server now understand single page application if you create a form how do you submit the form data to the server using HTTP module not only a form data any data which you want to send to the server or any data which you want to be true from the server you're supposed to use angular HTTP client module from submitted angular will take care of validation and everything submitting to the server server will validate and put its in the database form interaction any form interaction includes validating the input fields allowing the user to enter the data validate it entered values are corrective entered values are correct means you cannot say whether you are a John or David can but it can tell you the form field the first name has a proper alphabets are not credit card number does it has a proper format sixteen digit number or something mobile number gender are male female male only those kind of validations which you can do and password confirm password whether the passwords are matching or not these kind of validations you can perform on the client side what is the advantage of doing it on a client side you are reducing the number of requests to the server you are making sure all the form values are matching as for the criteria then only you are submitting it to the server so these are the three things which you need to understand about up four types of forms in angular there are two types of firms template driven firms reactive firms angular provides two approaches to work with the forms template driven and reactive forms so before we go and understand the reactive forms first of all you need to understand what is the template driven forms how it works so template driven firms what do you mean by a template driven form how it works is a question let me create a simple project terminal now create ng new model six forms I am creating a simple project so no CSS it is creating a project for you common thing is first of all you need to make sure I up model is ready component is ready all those things and we will then go to the next one it is still creating the project is already known change to directory more deal 6-4 ng so you know if you serve it what happens so you have to input it and remove unnecessary content in the app component at HTML file now I'll remove this and put a simple do tag like this now to make your page look very nice you have to say class container now you can say do class row you can also say do a class which is of column on am date for that means medium size column occupy all the 12 rows now what are we going to do here we have to design a form what kind of form is that very simple HTML form how it works all those things now a input type a text username and password or if you want you can use a simple form password I'll use a do row or something that is what I am trying to do so this is what they were found pool controls done in the second line where I want to show username password class call em d12 and the password field and input type text what is this username and this is a password what else you need for a form the login form to submit the data you need a button what kind of button is that column little button you login you can have a class b TN v TN primary these are CSS classes which I know bootstrap that is the reason why I am writing it you don't need to write it now ng so now go to the application localhost for to double zero once the application is up and running application is ready we can access it in the browser without any issue see he was a name password something it is looking now if you still want to manage it you know you can put it Center all those things but we are not bothering about other things right now how do I capture the data which I am entering into these forms I told you it is a template driven firms who use a template driven form first of all you have to include a model called forms forms model input forms model from the direct package called angular forms this forms model you have to import into your approved body I just imported a forms model into the page now go to my HTML page which has a form this form I want to submit it how do I submit it the form should have a button if you don't specify any button inside the firm by default it will be treated as submit button so now what you need to do when you click on this button you have to call a method which is the form submit handler so for that we can use an event called ng submit the form submit event which will any method name you can say on from submit a method and what you need to pass here this is a method so first of all this entire form I want to access how do I access 3 it is just a placeholder you have a user name input field password now whatever the data entered into this field username or password I want to read the data and display it on the UI so to ruda the entire form can be marked it as a some reference template form you can give any name login form you can say simply use simple names also and the from so when you say ng form this entire form the reference is going to be login form now you also need to place input field called ng model on every input field now access and see what happens any errors no errors we are good when you with the forum you are also calling a method so I want to fast this login form to this method as an argument this entire form I'm going to send it to on Form submit method and dot value to this typescript component so what is my types of component is going to contain on form submit it is going to receive an argument which is a form data now this form data can I print it console dot log form data form data done now just go and check any errors no errors now cross it whether it is working properly or not working properly now come to Firebug console do after all or whatever you want to do see John password is 'abc or admin one two three now submit a form you see this form data coming to you where are you getting this form data the data values which you entered in the input fields when you submit a button called login when you click a button called login the data is being submitted to time script C the password is looking very plain it should not be so to change that you have to go to HTML change the password field to password that is number one no this time it is David admin one two three now submit the form see the data is being submitted where it is being submitted in the typescript that means the data which you entered in the view is being centered to the typescript or a model now I want to show the data entered by the end user in somewhere on the UI only I'll say h1 form data now I want to show paragraph user name how do I show the data is a variable no now I can say login form dot username let's see what happens see there by default form data is empty now I will enter user name what happened so unbind it Jason is a pipe like uppercase lowercase Jason is a pipe which will display the form data okay no arrests this time cleaner no errors on the screen no see the entire form is being displayed here now if you go and enter the data I am able to display the form data on the UI what did I do very simple I created a form that form reference normal HTML form if I remove all these things what kind of form is this HTML form to make this form angular a template driven form I have added a very we'll call login form now what is this arms ng submit whatever I am going to use it NJ submit we have used it click even a button click same like that I have used it it's an event name provided by angular team that is called ng submit when you click a submit button where is this button the button is this by default button is submit the type of the button is submit and there is a method I have created called on form submit any name you can give there is no restriction you can say validate form bla bla that name I am going to put it here so that when somebody clicks on a form login button because you are submitting a form by entering all the data the form submission invokes a form handler called ng form submit on and form submit by passing a reference called login form the entire form got value its adjacent data login form that value now what is this then we are going to use a interpolation to print the entire form how do you get the form referenced in the view because you are giving a reference here now you understood what is the purpose of template or event giving a reference I can access this entire form even in my login form dot value now login form is a reference the hot value means it will give the entire of form fields if I add one more form fill here email or something I do a class called MD twirl I can put email input type email you can say email now if I go to the browser and execute see you have a email password blah blah now I will put all those values I'll say you know Bob at gmail.com why the email is not being printed the reason is you didn't use ng model now you understood what is the point of using ng model now login form dot value why am i using JSON if I don't use it what happens see it is object it's not a yes or not something it is an object that object I am converting into Jason using a pipe now you understood what is advantage of pipes it is helping you to convert the data object into a JSON on the UI on the view since you have a form data being captured from view what is happening here it's a view the view of the form you are mapping to the model called username using ng model username password email now are the form fields now go to component so now you have a form data with you why don't you make a service call here and send it to the server send to server using HTTP method once the response is received when you send the request to the server server will take that form data and it will process if everything is working fine the username password which you enter then it will say yes successfully logged in how do you say a lot let's assume I want to check a condition if form data dot username not equal to empty and form data dot password not equal to empty then only say a lot login successful for now simply I'm saying else what am I supposed to say alert in need credentials can we try this how do you do it very simple user name David password is anything you can enter email ready David at gmail.com now submit login what happened you cannot read user name of undefined the error is it says clinic cannot read property username of undefined in app component or TS line number 16 what is the code this is the code when I click on it now go and check why we are not able to get the form field data so you are getting a form data I have printed that out so I think here I am not passing that argument to the typescript method so now I have to say login form dot value now it should work let's see now David password David at gmail.com log it see login successfully now how am i reading it in the logic very simple I simply said typed form data dot username if I have a service which is ready to take my form data I can hit a HTTP client and say post or something because form data is always secure now here what did I do I told your routing switching to another page that also you can implement you can implement routing here now what we need to do here I want to remove all this unnecessary junk which I have added in the HTML so that you know our form fields looks very nice and all this from login so comments you can do like this this is called HTML comment what we need to do shift less than exclamation to hyphens and again two hyphens greater than is called commenting a code in HTML now if you go and look at it your page looks very simple if you don't want to email you can just comment out email also this is what your form now whenever we click so can we create quickly route how it will work so to create a route first of all I need to create a angular routing F dot routes dot TS file so simply you can say import what was that routes and router model from added angular slash router and we also need model with provider model with providers from where he is also from core no export constant routes routes I told you which is of type what array so I'm going to keep two rocks what are those routes objects are to create like this the road here routes will have what path the path is login I want to have login route and a home page or whatever component what was the login component I have to create all these things I haven't created I'll do that second one comma curly braces path slash home or a dashboard you can say once you log in you go to dashboard comma and component dashboard component or you can say main page or dashboard anything you can name it case it is up to you now you say export constant routing : model with providers a router module dot per route always copy paste so that you will not do typos rocks your routes are ready now your main configuration is ready so now you need to go to module and input routing from dot slash Abdur rocks now routing module I'm injecting done no I need to go to a folder car login I'm creating login I'm creating folder called dashboard to folders now in the login had to create a component login dark component or TS in for component from where at the rate angular slash core and you copy this component put it as at the red component a selector login comma complaint URL login dot component dot HTML export class in component that's it so now the next step which we need to do is that login component is ready plugin component Attucks channel should be there how do we can it in.com conant dot HTML now what is the login copy the code which I have written here put it in our login component dot HTML code I am removing unnecessary buttons all those things which you have added now this is a plain HTML we have a container now we can copy these if you want blog in HTML I have created in my app component what I need to do I have to have a router outlet so this is where your components are going to sit router outlet now what else I need to do dashboard component create file curl dashboard or component dot TS and you have to have a dash go dot HTML also comp1nt dot HTML so you have a component you have a HTML so in the HTML I'll just put simply I am from component dashboard or you can say you are in main page you are welcome to main page or something welcome to main page now in the component copy paste whatever you have written here and just modify this to dashboard this should be - or this should be dashboard component now where all you need to modify for these components you have to input 1 is aprox so first import login component from current location to login folder it has a login dot component then you will get a login component now you also import dashboard component this is called dashboard this is called dashboard now copy these two things put it in our app more Delta TS file you can also use ng create component but I'm not using it you can use it declare your components what you want to use now make sure no errors as of no company once again control see no error should be there now where is the route of the link first of all we don't have any router link to switch between I will tell you why now first if I go to localhost for to double zero what I will see it on the page nothing is being displayed why I should have a default route go to our approach create one more path for the default route page path whatever redirect to any path I am saying just go to login page any default route go to logon comma should be there I had to put comma at line number nine how about it why am I still not able to see logging component it says redirect to logon please provide path match oh sorry path match pool now the login page is coming up I am clearing this so now I can see login page I can put a title also to the login page HTML go here and put a do tag class row I'm just giving some CSS don't worry sign in which is part of my do tag or I can say class call MD 12 you can have a h1 tag all these are you know designing nothing to worry so sign-in button looks very ugly you can put some spaces or you can say you know this one should be six there are so many ways which you can design this one can be six this one can be six I'm just putting ampersand and we spray for now both the buttons will display in the same line that is what my goal what happened anything missing here that I make any changes and be SP okay and be SP that mean space the should run fine let it be so now come back to here I will put the data and if my login is successful I had to go to the next page home page that is what my god see in this if I say home it will take me to home - what or - more - more so here is my dashboard page I can see it but it is not so looking good if you want you know just go to some bootstrap copy something you can say bootstrap w3schools copy like you know jumbo done or something jumbo done means the look and feel I am talking about so I can copy this code and put it in my dashboard at HTML page - quadratics channel contains is right so I can paste here now if I go to dashboard page this is how my dashboard page looks see bootstrap tutorial I am talking about some website I am designing bootstrap tutorial or you can change this to HDFC bank and your account summary bla bla very simple you can do that I can tell you how to do I'll change this to HDFC bank and these are going to be anchor tags again anchor tag these can be account summary or you can put menu bars funds transfer and you can put wrote link but the outer link aren't created so I'll just put H F equal to empty for no I'll tell you why I am doing this now go back to the website and see false transfer should be in the next line anchor tag anchor tag a lie I'm just putting some tags LA or you can use a break line BR something so that it will come in the next line C funds transfer account somebody something like that you can change this text also but I am not spending much time on those areas I want to tell you see if this is a login page user enter something login credentials you can make a center page aligned also a login form design and when you click on a log in it should automatically take me to the next page so how do you do that router I think you need a APA called router where is the login component in the sloggin component I had to put a logic component at TS whatever we are doing this aren't form submit I'll cut it here I'll not keep anything in my form app component login component go here and paste now in the login component I'll just rerun once again if I enter the David username password blah blah it says login successful now whenever I click it will automatically takes me to the next page if I don't enter David first properly it tells me you're invalid conditions that also you can do now in the form data here you have to import router activate from at the red angular / co' you should have a constructor body any constructor you say router : router now here we can simply say this dot router dot navigate and an array what is a router name / - board that's it for done I mean we just cross verify the syntax angular routing programmatically and just need an import statement router dot navigate for that you need a router imported that's it is dot router that means the constructor gives u dot navigate and dashboard now go to the UI router was not founda so I had to use core why did I use core it's wrong now come back here what is the error cannot resolve angular rotor angular router no I'll enter David I will enter admin one two three password what happened login successful why it is not redirected any error just crossed it cannot read property navigate of undefined it says the router property is not available at why what are we using the router dot navigate the router dot navigate now we gate it's correct only and you are saying that go to this everything looks good why that this dot router is not available at what declare it may be if required here you can say this has a public so that it is available to you if it is a private you have to assign it a local variable on the screen login successful see you are programmatically uh navigated you are navigated to programmatically if you want to go back log ot can put logout option here hyperlink so what I can do is that once again I am showing you I will remove this alert screen I go to localhost for to double zero I will remove this username Suresh Suresh one two three login so I am on the dashboard now I can have a button here somewhere I can say logout w3schools HTML you can have a paragraph or anchor tag anchor a router link equal to you can take the user to login page again log out there is a log of click on it you're back to login page this is how routes will help so go here to your cloggin component whenever you are switching you can simply say name or you can say username what do you want to pass username how do you get form data or dot username it no how do you read that you have to read that in our dashboard dot component constructor here he will get a parents that router activated wrote something that is what I was looking for router link router name I just need to copy and show you that activated rock this dr. Hamza so this is your component in the constructor what you could do is that on initialization you can say ng need you just scare this dot around the route means you have to get a activated route first report activated row that means the current activated row from where we can get it from router at the red angular slash router in your constructor just get the reference are injected you can say a public router which is of type activated route or whatever it may be now this dot router dot per ounce dot subscribe you have to subscribe let's you be a see our ìbe subscribe you will get a params to the array of params now you can create a variable locally here you have two displayed on the V you name because of screen ok I can put it here in the beginning and a constructor an Indian civilization you can say this dot name theorems or name which are going to know how do you pass the data programmatically you're passing it now won't read it let's see are we able to read it or make sure no errors compile time also through H ABC there is a never what it says is the dashboard username Suresh that should not be it should be a : C is missing where subscriber one second here Co B SC Rab and I'll put a console statement for entire parents but the problem is I am passing data the data is not coming so how do we pass the argument there are different approaches which you can pass that we check how do you pass it programmatically have to pass this dot now get then what it is saying is path I think you have to put a colon slash also to receive the data how do we put it maybe in the dashboard component where your routes are defined okay wherever roads are different can you please say / : yep the police are passing in him in the path he had a space feel like this now you go to login component and pass the username only along with that and the routing it will be username try this and see make sure no error logon is done yes it is working you are getting the data also you see this now I want to display somewhere on the top saying that welcome message with the name so go to app component at HTML here a do tag class ro class call MD 12 I can take a paragraph tag or h1 tag paragraph would be a better option name how do you get here the name very simple is that name in the dashboard component you can say username this that user name you can say class align right so it will be aligned to right you can put welcome comma come back to your login page again enter the user name John underscore or you can say John David something like this password 1 2 3 say John David came but username is a proper did I make any typos now this should be user name by mistake I have user name now it will walk go to the UI go login page say jog turn no say Passport logging see the John is coming this one I can put it in a blue color italic also this is how you can design web pages that you can put it like a hyperlink or bold color so many approaches are there that is up to you how you want to see I can put a square and tag or I can put a bold attack now if I go and look at it the same page see this looks more template driven forms emphasizes and developing forms that are programmed in the components template using directives the ng form is a directive now you understood the power of directive the entire form is converted into angular form the template defines the structure of the form the format of its field and the validation rules the template or even found makes heavy use of ng model directive how temperature wind farms works with the help of ng model but now we are moving to reactive forms what do you mean by reactive form reactive forms are explicitly create the model object in the type script now you understood there clearly saying that the reactive forms are the explicitly creating a object of the model inside the type script that means the template driven forms works with a HTML the reactive forms works with the types cute component code we construct the form model object explicitly using the form control form group from array classes so you need to understand three things form control form group and form array classes how it works we will see when you have two forms are suitable where the requirements of the form are complex what is a heavy forms enough you can go for if it is a simple form registration login better you go with a HTML template driven so underlying building blocks found control form group form control is nothing but it tracks the value and the validation status of an individual form control what is that form control tell me a form control is nothing but any HTML form attributes so far I told you just know input textarea radio button checkbox select box button any other field all these are called from controls which we see it on the word farm group why do we need to group let's assume I have a firm first name last name I'll give you an example farm group I have a farm with first name last name gender password and confirm password and I have an address address will have a street city line one address line one state something like this so I can group this as one farm group I can group this as one farm group so if you want to group a fields you can use form groups form array it tracks the values and the status for an array of form controls array of form controls with the entire form fields which I just mentioned you input takes radio button if you want to get it contains a key value pairs nothing but control value accessor it creates a bridge between angular form control instance and native Dom element native Dom elements means the HTML element normally NATO Dom so it creates a bridge between the instance of a form control where do you create an instance of form control in the typescript if you look at the code you will understand parameter setup form model data model template driven versus reactive form reactive explicit created in the component class structured synchronous functions immutable so now provided the major differences so reactive forms where do we create it I told you right it is created inside a typescript class template driven class created by directive how ng form ng model which we use structured here we create a form in a structured manner hierarchy this template driven is unstructured but you can still access it synchronous react to is a synchronous template driven is a synchronous that is what I told you write to a data binding conducting functions it deals with the functions it deals with the directives ngmodel directive ng found ng submit like that you can have direct to solid because it's a template template means HTML code partials means HTML code new mutable and immutable that is how it works so these are the major differences with template driven versus non template level so mutable means you are able to change it immutable means you are not able to change it once the form is created maybe until unless you apply data binding that cannot be changeable immutable here template driven yes you can modify two-way data bindings or whatever that is what it talks about go to model view what is model you HTML versus Java typescript typescript versus HTML and the model group if we have a multiple I gave an example you have a form that is called ng form when you are referencing this entire form into a variable called template called F now you have a do tag with a two input fields password and confirm password to input fields now I want to group my two input fields into one that is called passwords that means passwords what password normal password come from us now I am able to access using F dot value dot passwords dot P confirm you're just grouping it nothing else you can directly also use it but it is having some advantage of grouping it now reactive are a model-driven forms what do you mean by RIA - or model driven forms so the reactive forms provide a model driven approach to handle the form input whose value changes over time so what they are saying is that if you create a form inside a type script those are called reactive forms those are based on the model driven in the model driven form we need to import some reactive forms model a new library other than the forms model template form model data model input control we bind a data state of the form component we give it to component and we synchronize it how does a react to form works reactive forms favorite color form control instance form control directive all these are retinol theoretically they are explaining you how these form controls will be working how you access them now I'll write a simple example and show you how you will do reactive forms then I will come back to this theory can we take the same example whatever I have created to this and I can push the code so that I don't need to recreate another product go to AB dot modular TF now you can say import reactive form more deal come at the rate and goon or slash you can also import in the same line comma separated value that is also possible now in this model we'll put reactive forms model now what we need to do is that we have to go to the component which component you want to generate so I will create another component just to show you react to forms just create a file name curve we have two forms dot compo 90s I'm just creating something and create a HTML file we have two forms dark component dark HT comer I create ATS are both artists Emma we are good now now what we need to do is that in this component at TS file now I'll create a reactive form before component ROM at the rate angular slash code copy the components you were MP were an ENT at the rate component curly braces selector : what am I saying reactive you just putting complete URL don't put semicolon reactive forms that component c1q any empty dot HTML which is in the same directory so just put dot slash X fourth class reactive forms cuddling this is like this component what else we have to do so first of all I have to create a form how do I create a firm first we need to have a farm group or a firm control whatever just import few statements input form group form builder come at the rate angular / form farm group I told you if you want to group two input fields into one group like gender you will have male radio button per group something that form builder I will tell you why we need to build that first up now you have a constructor in this constructor can we get a reference to your form builder so this form builder you can have a method or we can do it here itself you can have a method created create form or something a common method which I am going to use it what we could do see this dot angular form discard form builder dot group your grouping curly braces now what are you going to have it in a form group I will have an email ad which is a fairy type what you pass how do you add irritations I will tell you email ad possible now you are done now this form I am creating it from a type script remember that model-driven form that is what we are talking about know you have an email ID password created now you need to have a form builder form builder created go to HTML page now have a form I am not using any boots offer no input type which is of what text and name is email enter email I would say and the next thing which we are going to do in put a break line input type text password put it possible as possible placeholder zero neatly no so the firm control name what it is going to be email email form control name is the one which is going to hold the value for the validation part of your firm control name password now I created a component called ng from something vis not ng form so this I can give it to my conical form whenever I keep square bracket like this this is a director what kind of directive attribute data binding ng a ng form whatever you have used here right ing form I just copy pasted very no you have a password field now I will have a button to submit type you don't need to mention if you want you can simply say type submit now any click on this button what should happen you call a method on from submit if you want to pass the references if you want to store a reference email the password also you can put it how do you get the data of this email that value password are valid now go to our forms of width method which we are going to write it here what are you going to get email ID password email is a string password is a three now we put a control Stedman console dot log or you can put whatever email comma email password can we see this what is a proper now I have to go to my app index dot HTML here I need to change this to reactive form because I have to we have to we have to have to change this and I also have to change my app model to which component the component which I created import what is a component name you have to found component I should have created another project instead of breaking this dot slash we have two forms slash we are two forms component not TS you just go copy paste this we have two forms component put it in our main body so that it will be a root component you also have to declare it now to do all these things the reactive forms component does not exist the property and form cannot find react to forms line number up model the tears or letters help model so here you have a reactive forms we are too - forms there is a typo it happens sometimes got it a character no it's successfully loaded why there is another the selector is reactive did not match any element that means the real here to index dot HTML is something wrong track - I said it as a rag to make it as reactive okay I will copy this change the app component selector name by mistake I mean it has a rack to be active now it should work yes email any password submit the data came but there are errors he may already printed no issue when he formed first name home group control first name we using first name but giving another farm group expects a farm group instance please pass one in example from group my group input from control name in your class this dad my farm grew new farm control force name from Group group yes custom new form control password let me look at the APA angular form group example farm group has a curly braces first menu from control with EMT braces and to pass something empty oh I should call this dot create from method as a constructor now it should work I think no errors I forgot to call the form builder that is where you know your form group is making a nonsense see I am able to get the data now I'm putting some documentation form control holds the are tracks track the value and the validation of a found feel what is firm control it is used to track the value and the validation status you can see now that is confirmed controller now what is firm group one or more form fields I can map it as a one group why do we need to do that because you know a complex forms needs to have a group perform now go back to HTML part so whenever I click a submit button I am getting the email ID password I am printing that nothing else now you create an angular form this entire group I am treating it as an angular form assigning it to form group variable so this form contains this now the email ad form control name email ad this is the name which you need to use to populate the values or read the values from control name you can say this email ID this but email is the main thing which you need to use it and you are referencing to email if you want to use why are you referencing very simple if I want to pass the value of this input field to your method I am referencing using hash symbol so that that is a reference to that input field how data flow in the reactive form user types a value into the input field the farm input element emits an input even new a loop goes to the form control instant where the new value is going to sit the form control instance what is the form control instance in our case it is the email so that is one thing now the form control instance emits the new value the subscribers receives the new well whoever is subscribing they are the one who is going to get the new well who is the subscriber it could be your type script component it could be your templates anything so that is how the flow goes through data in the reactive forms favorite color is the input field they are putting and a blue is the value they entered whenever inputs the user it fights an input event form control directives favorite color controls are set value it sets the value when it will set the value the form control instance will set the well who will update the firm control instance value to the type script because it is a subscriber value that is how they are explaining it you need to understand how the flow happens data flow in the reactor forms buta model the user calls the favorite color method which updates the form control value how you will call by clicking a method or something entering data the form control instance emits a new value whenever you put something in the text input that is modifying the world value with the new well you change observables triggers any subscriber to the value changes observable receives a new value the control value accessor updates the element with the new value who is the controller the form controller value accessor updates the element with the new one creating a reactive form I gave you an g module you have to import a react to module and you have to write code in the typescript form group which we have used it and put it in the HTML template reference go and use instance of the form group so these are the four step which we have used it setting up area to form now I will show you an example let's see how our real-time forms works in this so how real-time we use forms with the conditions all those things I have a form null submit register what happened see localhost photo double zero angular reactive form validation I have a title title can be select box and say mr. or mrs. whatever I'll say mr. you enter the first name last name email ID password confirm password except terms and condition now I'm going to register it when you click a register all the fleas got trigger all the form fields got triggered with some validation it says the first name is required the last name is Rick email ID is required as Ford is required confirm password is record all our mandate repeat how do we say all these are mandate ripples so by default when you load this page it will not display like all these are mandatory field when you click on a register button only it is coming up what legacy until unless user did not touch if I click register it will not show error otherwise it looks very ugly right by default showing so now all these messages I want to show it in a ready color so to show that ready color go to a Searcy app have component at HTML all these are form fill it uses a bootstrap CSS wherever you see error messages this is required I can put a class curve simply aleck alert danger this is supported by bootstrap you can see this if you want see it says this is a required field you can add your own CSS also but right now I am adding like that just try to understand now same way I have created a method call this dot form create but here they are using ng initialization when you use ng on initialization what you do is that this dot register from instead of you know we used it this third ng for they use it a digital registration form now this dot form builder group I'm creating a form with the title first name last name email ready passport confirm password except terms and condition you can also keep it empty but they are also giving you a feature of adding your validators that means this form is validate this title is valid it required the password confirm password required how do we make sure the password should contain minimum length of six characters you can add validator dot minimum length where our editors dot maximum length so you can add up validations here you can also add it in HTML also accepting terms it is a boolean true or false by default checkbox is unchecked if you want to validate it it should be a true value then only the form will be submitted now else validator must match the fast four and the confirm password should match I have created a custom validator to take care of both password on my custom password should magic so this is what my I'll show you what I am talking about mr. David ABC David David one two three and abc123 subject how many police are invalid email addresses invalid why I haven't heard David why is it not taking as a valid because in the core clearly we mentioned email should have a validator that email pattern that means you have to put at the red symbol and gmail.com something here to say now email is fixed confirm what is not matching why this is a David one two three this is a ABC one two three so both are being validator when you submit a form because the validator here we are using it must match class or a of some letter which will take password and confirm password fields and they will validate with the value Center are they matching or not both value should be magic now I can say David one two three now if I click comes on condition it is still false if I click here it is true now registration done see all the values whatever I entered being captured by your reactive form now you can send it to service if I say cancel clear all so this is what reactive form no this is what your typescript code now the methods which you need to understand is that first class this is a selector component say here is that import must match what is must match this is the another validator which we have written to take care of password confirm password you can ask me why why means reusability wherever we want must match is what validator accept terms for the entire form whenever it is getting triggered we are calling a validator you can write your own validators also customize validator now can you do this in a template driven form can you write your own customized validations here we have added validator must work must watch is a method how is it being imported line number five where is this must not matter that validator what it contents it is simply a function must well you can export a function you can export a variable you can export a class you can export a model what it is doing it will take control name matching control name that means password and matching password confirm both to control names now written form group you are returning a form group and you are returning from group dot control dot control name that means password and a matching passport you are storing into a local variables which are not changeable and you are checking matching that errors why it form control farm control will have a valid invalid here is a touch it or not those things he is making sure no errors if any error written it if no error control dot value matching control dot value you are setting an error must match true when if it is not matching with confirm password are normal possible if both are same you are setting the error to none if you want to implement a validations in angular you can use a custom validator how do you use a custom validator on the forum vendors when you create a reactor form now the custom validator can be a class custom validator can be a function I have created a function from exporting this function if he is observed here in app component it is getting to Venice references are password references sub compound password what are these firm control instances these form control instances if we go here you will get them as part of your callback return function form group that controls form control name that means the password field matching password field you got it you are storing into a local variable which is a constant why I don't want to allow those variables to be modified if my password and the normal password fields have any errors then written back that means there is something wrong else check if both are not matching must match is a true setting error else it is enough so that means your validation is working properly this is how you write a validation now go back to your component now your component at HTML file what do you need to understand here you know how to create a model driven from registration form who is giving you register from go to your app component so the register form is a form group which you are assigning same way how I have created a ing form group now new form row from group column title it's a select box this is what you need to understand drop down input we'll try to understand first then I will come back to drop them what are the input pills me how can I say first name we have the one so label first name all these are bootstrap CSS designing skills he have a family input type text form control him firstly I have given email ID password in our example here you look at it first name truss is form control now ng class when we talk about a attribute directives we also talk about a ng class to give a dynamic CSS a class C ease in well it is a CSS class name this will be applied when my form is submitted and if my for me has any errors related to first name remember first name come here if I submit the first name displaying some message first name is required when do you think that will be displayed here go here HTML code you have a ng class which is a E's invalid class which will display ready color I can also do that ease in when it is a class name where do I put that you can go to your HTML put test I here or you can put it in our app component that CSS here dot he is invalid very simple color of the font in red nothing else now it will apply it is not applying in the HTML if you observe for every field they added a condition right what is that condition I'll go and put one more field title all those things by looking at the form title first name gender age I'll put age form first of all if I want to add a form field first of Allah to go to app component ideas in your app component at TS i will add age : square brackets which is empty what is a validation image is required well ii then it curves dot with point i have added it comma now easy is ready to be splay in the form now go to compound I just added validation of age is required then go to our component here what you could do is that I can take a do one do plane do it is I what it is class type is a bootstrap form group booster provided and column now a label what is that label can we say age the label and can we say input type text you need a form control form control name age what is the property of a age field which you want to maintain in the form and then this is going to be containing square bracket ng class I'm going to apply a class dynamically which contains ng cloths contain curly braces single quotes is invalid is a class which will be applied when do you think this class should be applied if I submitted it from a CV MIT Det and also if my F dot F means the form reference dot H dot error is true then only you apply this CSS otherwise don't apply so that is a reason why when you first time access age field C age is a feeling when you something is not closed that is when there is an arrow mark how to close it properly is a field if you want to display some message also you can display so if I submit this what happened something went wrong I just wanted to verify what is a mistake is working no now come back to here the validator class which we added age value a little dot requite and that comma now I have to add that in the HTML otherwise it will throw another somewhere I have put a extra less than symbol here it is I am removing it now what I am saying is here I have a div class form column age input type text change form control name ng class which I am going to apply which is a easy in valid CSS needs to be applied when there is a submitter and the firm error the validator should be V capital that is why it didn't work out it's still coming that upper arrow somewhere I didn't remove again remove now say there is no error message right no for the edge it is saying that thing if it is really a bad error it has to tell me saying that edge is required how do I say that cos we applied now I had to put feedback I have to give feedback to the end user how do I give a feedback when do I show that feedback message they do attack age is required can we show that no age is required by default it is display but I want to see the ease is required whenever I click a form a register button so for that yet right in this if condition if the form is submitted and yeah after that H dot errors is exist then only show otherwise don't show then the class invalid feedback needs to be applied what is invalid feedback you just copy this class name because we don't have that class go to CSS put that class name here writer see yourself in valid class name color thread right now it should display near at the color I am sure it is not applying here now only the easy is required also displaying when you click a submit button how is that possible the conditions which we need to apply color red why it is not a plane understand this is I'm talking about the feedback class is the one invalid feedback it should apply but for some reason the class is not applied so how do you display if the form is submitted if the form that error page is having some error then only show this due time always don't show it we are done for the day thank you my you

Channel: edureka!

Views: 2,924

Keywords: yt:cc=on, angular forms, angular forms tutorial, angular form submit, angular formarray, angular forms reactive, angular forms reactive vs template, angular reactive forms tutorial, reactive forms angular 8, angular reactive forms array, angular 9 reactive forms, difference between template driven and reactive forms in angular 7, angular template driven forms, angular template driven forms tutorial, angular 8 template driven forms, angular edureka, edureka, angular 8 tutorial

Id: Jfq0gXQWsTc

Length: 69min 46sec (4186 seconds)

Published: Wed Jun 24 2020