Complete Angular Material Tutorial - CRUD Form Design

quick demo of this video series with this video we have started a new video series on building complete angular material application with practical examples in upcoming series of videos we will learn how to use angular 6 material we will have discussion on form design operations pop-up dialogue data table with paging sorting and filtering and much more in this video we will design the angular material form for cred operations containing almost all important controls like input text box drop-down list radio button checkbox date picker etc so please watch till the end of this video series what's up YouTube welcome to core affection with this video we have started a new series on building complete angular material application in this video we design the form for credit operation inside the form we will have the most frequently used crud components like textbox drop-down lists radio button checkbox and they pick up in the next video we will implement the actual quad operation with firebase in following tutorials we will discuss angular material data table popup window and much more with practical example as you know angular material is a package or tool for angular developers it contains high quality UI components from Google material design so here we have the official web site for angular material material dot angular dot IO and here we have the website for Google material design in last few months Google updated their products with material design for example here we have the new interface for Gmail and this new interface is much better and impressive than the old one so I hope this is an inspiration for new angular material developers so let get started with our project first of all let's open the folder but we want to create the project so here is the folder and select the folder inside this folder we have to create a new angular six project for that I will use the integrated terminal from this IDE click on terminal here you can use this angular CLI command ng new then application name I will name this application as complete angular material app hit enter so here we have successfully created the ambulances project here you can see the new folder with project name complete angular material app now we have to install angular material and related packages so first of all we have to navigate inside the project folder here now we have the NPM command NPM install then double - save in short we can do this double - yes first of all we have the main package angular material and then we have angular CD key in order to work with animations we have to install this package angular animations hit enter so here we have installed the angular material and related packages in angular 6 application all of these instructions are given in the official gates here and getting started so here we have the commands in PM commands for installing required packages finally we have to use a theme from angular material so here we have the pre-built themes from angular so we will be using this second theme here IndyGo pink dot thesis now we have to include the corresponding scissors in our project so open stars dot CSS here and then we have to add the add import statement for the style sheet along with this theme start sheet we have to add a style sheet reference for material icons that you can see here just search for material icons so these are the available icons in order to use these icons we have to use this start sheet reference here under this step six you can see this reference just copy this then back to the project open index dot HTML page just about this head end tag we can add this tag sheet reference now in order to show you the application structure that we want to build in this part I'm going to create a new text file so click on this new file here I will name this file as application structure inside that I will paste this structure so in this application we have to create two components employees and employee so with this series of tutorials we will discuss topics related to angular material based on the employee register application we will deal with details of employee like full name mobile email Department than gender etc so first of all we have to create two components employees and employee and inside the shared folder we have the employee service class so first of all we have to create the components so currently we are inside the project folder in order to create a new component you can do this ng g for the real C for component first of all we have the employees parent component so here we have created the parent component employees from application structure it is clear that we have this parent component employees inside that we have the child component employee we can use the same previous command with some modifications in order to see the previous command just hit up arrow and we have to create the component inside the folder employees then component name will be employee hit enter so here we have created the child component employee now we have to create one service class inside this shared folder so we can use this command ng G for generate s for service we have to create the service class inside the folder shared which is not created but when we execute this command if there is no fold-up with shared name it will be created along with the creation of service class you have to create the service class with named employee service so we just need to type employee here hit enter so that's it here we have the shared folder inside that we have the service class along with this typescript file which is the file with extension T s we have another file with extension spec dot T s which is for test purpose we are not going to test this application so let me remove this file now enough with the creation we have to run this application for that I will open a fresh terminal click on this plus button here now we get inside the project folder then you can use this command ng serve double hyphen open in short you can just type o hit enter it will build and open the application in your default web browser so this is how the fresh angular six applications looks like now we can start designing our application so inside this default component HTML app component HTML we want to show the parent component employees this one employees so for that we can use the component selector which is here inside the component type script file up - employees now let me copy this and paste inside this HTML here now we have to create a tag with this selector okay now inside the employees component HTML I want to show a top toolbar containing application header instead of this default background we need a deal with glass container so here we have the deal with glass container inside this day we can show the toolbar from angular material so here we have the corresponding tag mat - tuba for each angular material component we will have this prefix for each component mat now in order to understand how to use angular material components you can see the official documentation just go to this components here and inside these navigations you can see toolbar here for each angular material component description we have three tabs overview API and examples inside the overview tab we will have the basic usage of the component below that we will have the various configurations for the component inside this API tab first of all we will have the impose statement related to the component module below that we will have the in-depth details like directives properties related to this module and inside this last tab examples we will have the various usage of the component so for this mat toolbar component here we have to import this module mat to bar module that we can do in a bit before that inside this mat toolbar we need to show a span inside that we will have the application name I will name this application as angular 6 material before and after this pan I will add one span like this both of them have this class fill remaining space so that we can position this pan in the center now we have to define these CSS class inside the default stand sheet which is stars dot CSS here first of all we have the div container inside that we have modified the merging and we have defined this class filled remaining space with Flex modification now back to the component HTML here as we have seen inside this documentation in order to use toolbar we have to import this module mat module like this for any angular material component we have to import corresponding module inside our project whether it is input element or button or drop-down normally we will import the module inside the default module file AB dot module or TS if we add modules for each angular material component this file become messy so in order to handle this problem I will create an extra mode you will here so just click on this plus button here in order to create a new module you can use this angular CLI command ng G for generate m4 module I will name this module as material sorry first of all we have to navigate inside the project folder then run the command so here we have successfully created the module material here inside that we have the module type script file first of all I will add an import statement for angular material unlike other import statement in order to reduce the number of imported Mencia with this single line we have imported all modules from angular material with this alias material now from this angular material we have to import this class here mat toolbar module let me copy this then we have to import this from material dot mat toolbar module now along with this impulse array we need exports array also so here it is exports inside that we have to add the same module let me copy this and paste it inside this now we have to import this new module material module inside this default module flowers app module dot TS so first of all we have the import statement here now we need to add this material module inside this import array here now let me save all of these modifications here then back to the application so here we have the toolbar just below this toolbar we need to show the HTML from employee component which is the child component for employees so we have to modify this component HTML inside this component HTML we will design the angular material form using reactive form approach or model driven approach for that for server we will define the form group inside the service class here for reactive forms approach we have to import these classes form group and form control from angular forms now we can define a property of the type form group so here we have deform it is of the type form group class and it is initialized with this constructor of form group inside that we have to provide an object containing form controls so here we have the first form control which is equal to dollar key is equal to new from control and here we have the default value which is none dollar key property is used as the primary key or unique identifier to identify each employee record from the collection you will understand this record once we submit this form for inserting new employees after this property we have another control for full name which is equal to new form control and we have the default value as empty string then we have email then mobile then we have city and here we have gender for gender we will have a radio button control after that we have Department for Department we will have a select control or drop-down list then we have type date it will be a date picker finally we have this is permanent control it will be a check box to identify whether a user is permanent or not by default it will be false now in order to use this form group property in other component classes we have to inject this in app module dot e is fine so back to app dot module tortillas file first let's add the import statement for employee service class now have to add this employee service class inside these providers array here now using this form group property we have to design the form inside the component employee dot component dot HTML for that first of all we have to create an object of this employee service class inside the corresponding typescript file employee component or TS file so here we have the same import statement for employee service now we have to create an object of the employee service inside the constructor which is here service is of the type employee service class instead of this default paragraph I will add a form element so here we have the form element and we are going to design this form using the service class property for which is of the type form group for that we can add this attribute form group which is equal to service dot form in order to work this reactive form approach or model driven approach we have to import the reactive forms module inside app module dot ts file here so here it is important reactive forms module from angular forms now we have to add the same class inside this imports array here now back to the component HTML I am going to add a custom class for this form here which is normal for I will define this class inside the standard CSS with updated magic now inside this form we are going to divide the form into two grid columns corresponding documentation can be seen here go to components then layout here we have grade list so for this particular form here we need two columns with one draw you can see the basic usage of the component here for this we have to import this module matte grade list module so we can do that inside the new mode you will here material just add the module Matt great list module inside imports array and the exports array then back to the component HTML here we have the grade list component it has two columns since we have one draw we don't need to specify number of rows we will specify the row height as 300 pixel inside this we need two columns so here we have two Matt grid-tied we will start with the first column inside that I will add a div with class controllers container now we will define the class inside this chart our CSS here for the class we will set the width as 100 percentage and we will have a 5 percentage padding inside this div here we have the first control which is input element it's of the type hidden' and here we have the form control name which is equal to dollar key that means here we have created a component for this dollar key which is the primary key for the employee ok so that is why we have hidden this property here now just below this hidden field we just need to create a textbox for full name for that first of all we will add this mat form field generally which is used to enclose more than one angular material for now here we have the input element and we will set the form control name as full name in order to convert this normal input element into a matte input we have to add this directive matte input here after that we will set the placeholder as full name matte input documentation is given here under form controls you can see this input so for any input text box we have to add this directive matte input you can see various examples here with prefix and suffix you can check them later for full name we need a normal text box in upcoming tutorials we will discuss input with prefix or suffix elements like this so for this component we have to import this class here Matt input module and for this form field here we have to import this here you can see the API mat form filled module so let's import these two module classes inside this material module so here we have filled module and input module we have to add the same inside the expose array also now back to the component HTML currently inside this form field we have a single input control later we will have more controls when we implement validations like this full name we need to add form field and input controls for remaining properties so here we have the control for email then mobile and city now let's look how the form loose with these controls for that open parent component HTML which is here employees component HTML just below the toolbar we need to show the HTML from the child component so here we have to add the child component selector app - employee now let me save all of these modifications here then back to the application so here we have the four input controls inside the fourth-grade quorum here we have aligned each control in horizontal instead of that I want to show them in vertical order so that one control per one line for that we can add the styles here inside the div all of the component will be said 200 percentage okay now let me save this then back to the application oh boy here we have another problem only two controls are listed let me check the inspect so it is related to browser animation module I think so we have to add the corresponding module in app module RTS file so here we have the corresponding import statement browser animation module from platform browser animations now we have to the same inside the imports array let me save this back to the application now let's add remaining controls inside the second column in Crete so here we have the second gate column inside that we will have the same tip that we have added here with class controllers container first of all I will add radio button for selecting gender for that first of all I will add a div with class add bottom padding this bottom padding is required for the proper alignment of controls like radio button and checkbox so here we have to define the class width padding and pixel inside the day we will have the radio button before that let's look the documentation here we have the form controls inside that we have radio button so this is how it looks okay so in order to work with this we have to import this module so open the material module in our project we can add the module like this then back to the component HTML we can do this we will have this matte radio group and we will set the form control name to gender inside that we need three radio buttons okay one for male and corresponding value will be 1 then female and for other types of gender value will be 3 now if you say this you can see the newly updated radio buttons for male female and others then we see them it looks stick to each other so we have to separate them for that we will define this style here this is particularly for the radio button we will add the margin left as 5 pixel now let me save this back to the application now it almost fine if you are not happy you can increase the margin now let's look how to add drop-down list or select control in angular material so let's have a look at the documentation here here we have the Select control so this is how the default control look like can see various modifications here basically for this control we have to import this math select module so a corresponding module will be Matt select module let's add them in imports and exports array back to the HTML now let's add a form field for select control inside that we have the Matt Selleck control and then we will set the form control name as Department which is already defined in angular material form group and here we have the place holder as department now inside this control here we have the post default option which is not for options we have to use this mat option tag for now I will show the remaining options from a static array in the next video we will convert this into a dynamic drop-down list so first of all we have to define the static array in the corresponding type script file departments it contains three options for Department one department to and Department three now back to the component HTML we have to I trade through this static array here so I will add the ng container and here we have the ng for detective and we will I trade through this static arrived with this department variable so here we have the option mat option we set the value with this string interpolation department dot ID and here we have the value Department dot value now let me save all of these modifications here back to the application boo that's it Department one Department two and so on now we have two more controls like this we have to add date picker for selecting hype date for the employee how we can add date picker in angular material let's have a look in our documentation under these form controls you can see the date picker here we have the basic usage of the date picker you can see some variations also here okay as per the documentation you can see that we have to import this mad date pickup module but in practical along with this module we have to import the dependent module native date module so let's look how to work with this date picker first of all we have the form field and here we have the input control and we will set the form control as hard aid and here we have the mat input that means this is a normal text box and here we have the math date picker which is equal to picot then placeholder will be handed after that we have a toggle that means which is responsible for this toggle here this one okay note this calendar just this picker so we have added that toggle as a suffix and here we have the four attribute picker so this is how we connect these two controls after that we have this mad date picker which is responsible for this calendar here okay now before showing this date picker in our form let me add a checkbox to identify whether a user is permanent or not you can see the checkbox documentation here checkbox you have to import this module Matt checkbox module here you can see the basic usage and here we have some examples with some various applications so back to the project inside the material mode you will we have to add this module Matt checkbox module in both of the arrays and back to the component HTML for surfer we have a div with class add bottom padding which is already added here then inside that we have the control mat check box form control name is equal to is permanent so here we have done with input form controls let me save this back to the application here something went wrong what's happening let me check the inspect yes we for go to import modules related to date picker so here it is they become module which is already defined in our documentation but this is another dependent module so do not forget this dependent module let me copy these two modules then pasting inside the exports are here save back to the application here we have the Heritage and here we have the check box now what do we do with these controls we need a submit button right so we can do that here we'll add another div here with class button TRO and inside that we have one button for submit and you can see the details of button in as per the documentation here under buttons click on button here here we have D default button for various types of UI interface you can see here basic button raise button so and so color is said as primary type will be submit and text will be submitted after the submit button we need a player button so here it is so in order to work this button we have to import this corresponding module mat button module so open material module and we will add the button module here and here let me save all of these modifications back to the application here of course there will stick to each other unless we add a margin like we have done for this radio button let's open stars dot CSS then here it is we save this back to the application so everything is fine now shall be completed with form design so this is how we can design forms in angular material with form group now let's look how we can implement validations inside this form that means angular material validation for that for server we have to update the form group that we have defined inside the service class here in order to work with validations we have to import this new class by from an coliforms now I want to make this full name and mobile as a mandatory field so that we can pass through the constructor second parameter so he will set this full name and this mobile has a required field and for this email control we have to verify the correct format of email for that we can add this validation here validators dot email for this mobile text box we need one more validation which is min length so we can specify the validation like this validators dot min length it should at least contain eight numbers with that we have defined validations inside this form group property here now we have to show validation indications or error messages in our HTML file which is here employee dot component dot HTML since we have made this full name and mobile as a required or mandatory field it is a best practice to add this a string mark for these two controls here I will add the suffix with a strict mark for both of these controls here so that user can easily identify this is a required field now in order to show the validation or about this control full-name we can do this match our directive can be used inside that we will show this message this field is mandatory this mat or a directive is already defined inside this mode you will hear form field module that you can see in our documentation here we are inside the form field you can see the first directive mat or a single error message to be shown underneath the form field okay like this we have to show error messages for this email and mobile for email we need to show the error message when we have an invalid email inside the textbox so we can do this invalid email address will be shown when there is an error due to email text box now for this mobile control we have multiple validations we have required validation and mid-length so let's look how we can show different error messages for different types of validations for that we will use the Matt or directive with ng-if so we can do this I will show the error message this field is mandatory when this condition becomes true it checks whether we have any error or not if we have any error and which is related to require then we will show this error message otherwise we will show this message minimum eight characters need when this condition satisfies now finally I want to disable the form submit button when this form as a whole is not valid so we can add this disabled attribute based on this condition here we will add this disabled when this condition satisfied that means the form as a whole is not valid let me save all of these modifications here back to the application initially the submit button is disabled that means this form is not valid you can see here full name and mobile are mandatory validation error message will show only when we leave that control as empty now you can see the error message this field is mandatory now let's do the same with mobile it is mandatory now if we enter some digits inside that we have another validation minimum 8 characters needed so here it is finally this form as a whole is valid so here you can see that the submit button becomes enabled email is not mandatory but if we under something inside that it should be in proper email format otherwise we will have this valuation error message invalid email address if you complete with a valid email now this form as a whole is valid and thereby we have enabled this submit button so this is how to implement validations inside angular forms now let us look how to clear these controls using this clear button here okay for that I will wire up a clique even for this clear button now we have to define this on clear function inside the corresponding typescript file here so here we have the on clear function inside that furcifer we will clear the form group by calling this function here preset function from this form group property when we call this reset function all of the control value will become null so we have to initialize the form controls to their initial default values for that I will define another function in our service class it will be initialized form group now we have to define this function inside the service class here it is as simple as this here we have the function initialized form group in order to change the values of these form controls from this form group we can call this that value function inside that we will have another object containing default values of these controls here okay now let me save all of these modifications here back to the application let's look how this play of button works click on clear in this part we have completed with designing CREB form using angular material form group you can find the github link in video description in the next video we will submit this angular form for firebase square operations and we will show the notification message using angular material in following tutorials we will list those inserted records in angular data table with paging filtering and searching and then we will discuss pop-up window in angular material and much more if you found this video helpful please thumbs up this video and for more hours and videos like this please be subscribed to core affection please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 132,039

Rating: 4.8978434 out of 5

Keywords: angular material form, crud form design, how to design forms in angular material, install angular material, how to use angular material, angular material form validation, material dropdown list, reactive form, material component, radio button, date picker, check box, angular material form group, angular material for angular 6, angular 6 material, angular material tutorial, material theme, getting started with angular material, build app using angular material, CodAffection

Id: ZGWOc37kQkw

Length: 37min 19sec (2239 seconds)

Published: Thu Sep 06 2018