Material UI Form Design with Reactive forms | form controls in material UI | Nihira Techiees

and in this video let me design form using midi Railway form controls so it recovers most of our controls like a input text area select date picker auto complete radio button and check box so once it is done we can get the values from our firm using the concept of reactive fonts and also I am going to cover how to set the value store form also using the same reactive forms concept now let me go to my application there we can start our implementation okay this is my created application here the first step is we have to import the required models so the first one is input that already we have imported and the second one is Select and auto complete that also included and next let me include this date picker and the model name is matte date picker model so let me include in this export section and the similar way we have to include one more model for the date picker that is matte native data model okay and next I am going to include two more models so the first one is radio button and the second one is checkbox can include one by one okay fine now the next thing is I am going to create one new component for implementing our farm design let me provide the name is from DCM okay now the command is created so let me include this into our app routing model after this table so let me include this one the path name is Farm and our common name is firm design component so let me save this one and already our application in the running mode so our path name is form only okay find the text is coming from our component so here we can start our designing first so let me remove the existing item we can start using the math card so there we can include this MAT card content and the mat card footer see if required we can include them at card header also and for this Mad Card let me include one custom class so the margin two percentage and the default text line is Center so we can move this into the left so inside the mat card content we can include our farm field and then we can include our first control input and the directory name is match input depend on label this is for name so let me say this one we can see the current output so we have one small text box let me just inspect this one I need to get one class name okay this is the class so the width is let me provide my indeed percentage margin on percentage so let me save this one see the output now so our control coming in the full screen okay so here we can include our next controls one by one let me provide us the email then phone next country then address so after that term and finally date of birth okay currently I have included the input control for all the fields and if you check the design also it is that not much fair so we have to change the relevant controls accordingly so before that let me Define on custom class math 50. and with this 48 percentage and margin one percentage let me save this one we can take this class so the first field the name is fine and here let me include this class mat 50. and the second field is email so we can have the input field that also fine and here also let me use this same class and the third one is phone so here also the input field is fine and the fourth one is country so instead of this input control we can use the max select option so here also I have to include this class and let me command this one so instead of that math select okay so instead that we have this matte option and let me declare an array so India so it is just a hard code details okay so let me bind in our math select control and the value also so let me check the output now see now name email form and our country the datas are loading from our array okay so if I'm included one more record okay see it is coming like this and in our address control so this is actually a text area so let me command this one the input control so instead of that we can use this text area and again we have to use the same directive math input you know so now we can enter the multiple lines and the third one is term and date of birth for this one also let me include this class the same line we can have through controls that is my intention okay this is not and this term is the autocomplete so here let me include this matte autocomplete and for the connectivity we have to use the property of match Auto complete the same thing we can bind it here I'll say identifier and also we can make the first steps Miss active and finally here also we have to bind the matte option okay the similar to our select control so let me declare one more array 15 days so this is actually a payment term and here also I'm going to use the NG for okay we are getting an exception okay it should be small C okay the exception got resolved see now we have 15 day is 30 days and 45 days so if I'm selecting something it is automatically gets selected and when I'm typing something also the search will happen so there we have to include some custom functionality that I already covered in my autocomplete video so please refer it so this video is mainly focused on the form design and the next control is server uh date picker okay so as of now I am having just one input control so here we can use the element this match date picker okay and let me provide one identifier also okay and finally the property match date and and let me include one more element also and this is for this picture identifier and also let me include one directive here so let me save this one see so when I'm clicking so it is coming like this so if I'm selected the value it is there so the format is month then date final loan is the year so if you want the Showcase back into the user so we can use matte hint option so anyway this date picker also not the interesting topic so let me create one separate video for this one okay so this is the way it is working and next I'm going to include the radio button so instead of the form field I'm going to use the due tag so first we can use this mat radio group so here we can include this math radio button mail and female so actually this is for selecting the gender okay value mail value female so let me save this one okay this coming like this when I'm selected see so the design should be like this and the color it is somewhat in the pink color so if you want to change the color also we can change uh for that we have to use this color option so let me provide primary see now it is changed the similar way I am going to include this checkbox also matte checkbox so this is for showing the status is active okay so this one also coming the defaulty color is pink so that is our ascent so let me change this into one okay so we mostly included all the controls finally we can include the buttons so in this footer section let me have more due tag and here we can have this button and the directory is matte rest button the first button color is primary into the text let me provide save and the next one they can provide a clear and the color is one see now it is coming somewhat like this so what we supposed to do Marge into percentage of the textile and right okay okay it is fine and still the buttons both have some space so we can include on more class to fix it okay see now our design is fine so we have all the datas okay so next what I'm going to do how to get the values from these forms using the reactive forms concept so I already I have created the separate video for reactive forms so anyway let me share some details here so if you want to use the reactive forms first you have to import the reactive form model so that already I have done and the next thing is let me go to our component here I am going to have this Constructor and then we can inject our form Builder using the form group also directly we can Define our forms for me let me use the form Builder okay that is the better way so we can provide our file name is customer form this dot Builder group so in the form group we can Define all the controls one by one the first one is name so this dot Builder dot control so the default value is CMT so if required we can include the validation so let me include the required field validation okay so validation dot equal so let me say this one and next let me copy these forms so here I'm going to have this form element we can move our complete items so inside the forms so in this form let me how this form group so in this form group we can use our form name okay and also we can have one event and this submit save customer so let me Define the function otherwise it will throw the error and in the button point of view so in this save button let me provide the type is submit so we can save this one so next in our control we can use the form control name okay so already I defined just one control name so let me save this one so now if I am trying to submit this one see we are able to see the red color because this is the required field so while defining the form itself I have mentioned this field is the required one that's what we are getting this red color alert so if I'm entering some value it is gone if it makes this is empty again the red color is Cam so the similar way we can Define all the controls the second can release email for the email we can include one more condition okay for the format so if you want include more than one validation you have to use the option of validators.compose okay so here we can have the array so insert the array we can include n number of validations validators dot record so our next control is phone then country then actress and term the next one is date of birth for the date of birth let me remove this validation and the default value I have to provide like this okay so basically it is taking the current value for that data but the field today's date is the not valid one but my intention is I have to Showcase so we are able to set some values okay so if you want give some values here then month and date okay and the final two are one is gender so the default value let me provide a mail and the similar way selective so we can Define our field as status so the default value is true so we can save this one next let me go to the HTML side we can use this form control name so this one is email then phone and Country next to address then term and this one is date of birth and for the radio buttons yeah we can include in the group section this is gender and the final one is the checkbox status so we can save this one see now the default values are detected so in case the default value if I'm provided female there it is yeah so in this form if I am giving like a female it is selected like this and this date value also if you imported three 25 so it will come like this okay and now trying to click this save button see so these all the fields we have the validation so that's what we are getting like this so this is the input feature in our material UI and now we can get the values okay so already I have defined one function by clicking the save so here I am going to include one console.log so this Dot customer form dot value so let me save this one we can provide some values country India some mattress and term 30 days so let me provide some values okay female active so in this console currently we don't have anything so when I'm clicking this save we have the object address country date of birth email gender name phone status and 30 days term so if I am choosing mail and also it is effective see false and yeah the generous mail so the next step is we have to call every AP and we have to pass this object based on that we can store in our database okay so that is the expected work ground in our real-time scenario okay anyway so now we are able to get the values the next thing is obviously we have to set the values so once we have the data so we have to set the values to our form controls now let me go to the TS file and here I'm going to implement the hook on on it we can implement this one and here I'm going to set the values okay so this dot our form name customer form set values so this is the kind of upset name so let me provide the values rather than email this is our official email only rather than phone so I'm just providing some numbers that's it then the country let me provide USA and term 45 days next to this address add one and this date of birth so we can have a new date and year 2001 okay provided some values then this gender mail so finally status so the value let me provide true so we can save this one see the unload so the unload itself we are assigned to the data and here are the case and email the phone number country address 45 days this date of birth and this is set your mail so if I am changed this into false and this is female okay it is changing automatically okay so this is the way we have to set the values and the next thing is how to clear this form so using this clear button that also we can implement so here we can have one one more function so let me bind the function here The Click event so again this dot our form name customer form dot reset see now initially we have this data so if I'm clicking the clear so completely data is removed what are the fields we have added as the validation so it is showing the red color okay okay great now we are in the end of the video finally we have completed two important topics the first one is design and the second one is reactive ones and also we covered most of the controls so I hope you have the better idea about how to set the values and also how to get the values so so still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel so in my next video we can see one of the interesting video so please stay tuned thank you thanks for watching

Channel: Nihira Techiees

Views: 7,791

Keywords: Angular Material Tutorial, Angular 15 - Material UI Tutorial, Material UI Course for begginers, design forms using material ui form controls, material Ui components with reactive forms, handling material UI radio button with reactive forms, material UI checkbox with angular reactive forms, date picker in angular material UI, angular material ui autocomplete with reactive forms, how to get values from reactive forms, reset reactive forms, assign values to reactive forms

Id: Y5QJJXn-kU0

Length: 28min 50sec (1730 seconds)

Published: Thu Apr 20 2023