Angular 14 CRUD Operations with reactive forms & Material UI Modal popup | alertifyjs

hello friends welcome to nigeria techies in this video i am going to explain angular 14 reactive forms with material uh model pop-up and if you watch this complete video you will be familiar on the below three topics the first one is angular 14 credit operations with reactive forms and the second one is implementing material uh model popup with some form controls like input select checkbox and radio button and the final one is implementing altify.js this is for creating the traditional notification and alert now before going to the implementation i am going to provide my final demo so this is my employee screen here i just loaded all the employees using my dotnet core services now let me create one new employee so the design it's completely created using this material ui and for the functionality i am using this reactive forms so those are the mandatory fields we can see the star symbol now i am not entered any value let me click the save button so i am getting the error message please enter the valid data and also those are the mandatory fields the fields are changed into the red color so let me provide some values john britta and the phone number is that one is email so let me select the destination angular developer at the generous mail so it should be in there is active only so let me click the save now so i got the notification is saved successfully so let me search my record yeah so this is the created record john britta so here i am going to change the name john britto y so now if i am saving the value automatically gets updated so even our listing and this power both are in the separate component so whenever i'm doing changes in my own component it automatically gets reflected and the final one is delete so when i'm clicking this delete button i am getting this confirmation pop-up if i click to okay so the record should be deleted so even if i'm searching char so it's not available so this is all about my demo now let me go to the implementation for doing this implementation i listed out all the steps the first thing is we how to create the material uv model popup so let me go to my application here i am going to create one component for generating this power ng generate components my component name is model popup okay looks like our component is get generated uh here the spec file is not required so let me remove it so currently we have the listing only so let me add the add new button so in the app component the edit section b already included the button so let me copy the same thing the text should be add new and this event we have to include little later okay great our button gets added and our second step is we have to include the model for using this dialog so first we have to import it here so it says dialog and our model name is mat dialog model okay this is fine so now let me go to the app component so in this app command only we are opening this power so i have to create one function here open dialog so here i am going to inject the matte dialog first so private dialog mac dialog here this dot open dialog dot open up so here the first input is called component that's what we have created this model pop-up common on so let me include here model popup component so after that if you have any parameters so we can pass it the first parameter let me pass it here in the animation the same way i have to pass the one more parameter exit animation and also i'm going to provide the width so let me give 50 percentage okay this is all about fine so in the pop-up we have to include some changes so let me go to the official site so here i'm actually using this dialog component so let me copy the html content here so this is the basic text only actually we need to modify everything and the next step is be how to include this function in our button click so let me write one click event so it's having two inputs only starting duration so let me give thousand milliseconds and the exit i'm going to give 500 milliseconds so we can verify now how it's going to work okay see the pop is opening actually the default text is coming we have to modify based on our requirement so now let me going to start my designing here so instead of delete file i'm going to give employee for doing add and delete i'm going to use the same popup only so this content also it's not required so let me include one form tag here so after that so in this matte dialog content i am going to include mat form field also i am going to provide my first control so this is for code i am going to give the placeholders code and also i need to convert into mat input so let me see the output okay the text box is coming but it's not in the full line so let me change one style here this mad form field so let me copy the complete style so in the popup component.css i am going to give black and also it's important okay now it's coming in the complete line and also we have the button is no and another one is okay so this one also we have to change so instead of no we have to use clause and another one is save and the class also not fair so let me change it for the save button this matte dialer clause is not required and another one is yes this one is the closest required because the cancel button so instead of the color primary i have to give one okay see ah now the close absolute there and also the save so if i'm closing it's closed and we have added one field the similar way i am going to add all the fields so it's not going to take much time the second one is for name and the third one is for email the fourth one is for four and the fifth field is for destination but actually for this destination i am not going to use this input so instead of that i am going to use select so in the material you will be how the control is match select okay great and also we can include the math label so this code and the second one is name email then this phone and this select is for loading this destination for this designation destination i'm not going to provide the hard code value so instead of that i i'm having one service so i will load the data dynamically and here i'm getting some error way because the match selected so if i'm using this match select i have to include the model so let me go to the material us side so first let me import it angular material slash select and my model name is match select model the same way i am going to include two more model one is for radio button and another one is for the checkbox otherwise the same error once again it will come one is radio and another one is select sorry select actually it's a checkbox online fine so matte radio model the similar way matt check box model so now let me see the design how it should be yeah it's a great so the all the input fields are coming the final one is destination so actually i'm not loaded the option so next i'm going to include the control name is a radio button here i am selecting this first option i mean the first example because the model we already included so we can use this one directly so the option select and gender the first one is male and the second option is female the value the first one is cm the same way second one is f okay we have done and the next i'm going to include the check box again the procedure is same so let me select this example and the first box let me take it so after this radio group i just included and i'm going to remove one checkbox because one is more than enough for us so the field name is is active okay we have done i hope we have completed our design part yes see so the radio button is working even the exactly also so we have completed our design path the next important thing is we have to initialize our reactive form so let me go to the ts file so using form group and the form control i am going to initialize my reactive form new form group and also one more important thing so we how to include the reactive model in our app.model reactive for model so it's available in this angular form so it's included now i am going to define all the controls the first control is code new form controller so for this one i'm going to provide the default value default value should be 0 and also this field should be disabled so let me disable it okay fine the next field is name for this name i am going to include one validation so the default value is empty for adding the validation we have the class is called validators so let me include it yes so that required okay great the similar way i have to include all the form fields the third one is for email and the fourth one is for phone and the fifth one is destination for this destination i am not going to provide this validation required okay and the second one is for gender so the gender i'm going to provide the default value is mail and this field also it's not required and the final one is is active for this one also i am going to provide the default value is true a true or false scenario so one step we have completed we have initialized our reactive form so our next step is we have to map this form into our design so let me copy the form name so in the descent part i already included this file here i am going to use farm group and we need to provide our form name after that we have to bind our event so ng submit save employee and also i am going to change this button type into submit so now let me define this a function here first i am going to check the reactive form contains the values are valid or not if it is valid i am going to allow for save else i need to throw the exception message okay and if it is valid so let me check what value actually is coming here so console.log this dot reactive form dot value so now i am coming to the screen if i check the here there is no validations are included why because i just defined the form name only other than that this controls i am not binded properly for doing this control mapping we have the parameter is called form control name so the first one is code similar with the second one is for name so once it's mapped the validations also gets included so let me show you here i just added for two fields one is for code and another one is for name see now the name i'm having the star symbol so even if i'm not entering any value it should be changed into red color so let me do the mapping for all the controls so this one is for email and the third one is for phone and this select control is for designation then this radio button is for gender and the final one is checkbox is used for is active so see the design so what are the fields i have declares the mandatory field so i am able to see this star symbol so if i am clicking the save symbol also i am getting this red mark so now i am trying to give some values and draw editing.com and here i'm providing just some phone number so let me go to the console also so if i'm clicking the save button say i'm getting the value their name is android email phone number and destination actually destination b don't have any value and also gender i am getting the final one is essential so the exciting field also true but i'm not getting this code value so because it's a disabled field if i want to get this disabled field value also so i have to use get raw value instead of that just a value now i am going to provide the values once again and row and some phone number so if i'm clicking the save see i'm getting this code value also okay fine so our next step is we have to load this destination from our services so let me go to the service so the service currently i'm having only one method for getting all the employees so we have to implement three more functions one is for save and also another one is for get by code and also delete first i am creating this for get by code so the get by code usually how one input is code so let me change the url also and our third function is remove so instead of get i'm going to use delete and the fourth one is save input data so instead of get i'm going to post so after the url i need to pass the data that's it so this is all about this for employee and also we have to create one more method is for destination so here also the return type is not required so if you have the created model then you want to use it otherwise it's not mandatory and the url let me go to my services so this is the service is returning this destination information so let me replace it here okay we have done in our service side so let me go to the model pop-up component here i am going to inject the services so the service name is master service so the first thing is i have to load the destination so load destination and i need to declare one variable also tiny so this dot service dot get destination so let me subscribe it so this dot this data equal to result and let me call this one in the initial loading time okay currently i'm having data in this variable so let me go to the html side so in the html side i am having this select match select so after that i am going to add this matte option so in this option i am going to use ng for directive let item of the variable name so the first thing is i have to bind the value so the value should be code item.code and the second one is text next i am going to use the name we have done almostly so let me verify so see the angular developer manager and the technical team leader so this is loaded fine now i am going to concentrate on this save function for the save we already created the one of the function so here i am going to call the services so this dot service dot save and we have the data this dot reactive form get raw data i mean get draw value okay fine so once it's done so let me subscribe it and so let me declare one more variable for getting this result information response data so this dot response data equal to result so let me put this value in the console so based on that we how to implement our logic that's it again i'm going to give andrew and the email should be adatine.com and the phone number i am just giving some phone number destination is angular developer the mail is actually it's fine so let me save it yeah if i am going to the console i am getting this result as fast so here i have to include the condition if response data dot result w equal to pass then this is the past scenario here i need to display my alert message for implementing dialect as i mentioned i am going to use this alertify.js so let me install it first so the first thing is we have to install this alertify.js package so we have the npm command i will include in the description you how to use it okay great it's installed once it's installed it will include some cs files so let me go to the style page here i'm going to import it there are two things i have to include one more thing so let me copy the bootstrap so instead of this bootstrap i'm going to use default i am not going to spend much time on this already 5.js because already i explained in my one of the video so then i have to create one type file so in the type file i'm going to declare a model finally i'm going to this ts config file so in the ts file i'm going to include typed roots here i'm just added this node modeler types and also i mentioned my file path name that's it so let me import the selectify.js in my component first i'm going to use in my model pop-up component okay it's added so let me copy this one in the same method once it's saved i have to give like alertify.success saved successfully the similar way if they receive invalid data i have to show an error message error please enter valid data so if you are installing any package you have to re-run your application otherwise the changes may not affect properly okay it's done so now let me check once again so if i am clicking the save button without providing any value i am getting this please under valid data dialect message i am getting the similar way i am going to provide some value nahira add the email its fine and i'm providing this values angular is female and active so if i'm clicking the save i'm getting this saved successfully here the thing is the popup is not lost and also if the data is not affected in the list so if i am searching the nihira the record is not found so after refreshing i will get the record so now we have to close the pop-up the same time we have to refresh this listing here the problem is the listing and our model both are in the different component so we have to use the observable concept using that we have to refresh it so as i mentioned the components are different actually we are using the services say so in the service part i am going to provide one variable refresh required new subject of so this subject concept is belongs to rxjs and i am not going to return any data okay just to define the same time i am going to define one getter function require refresh so it's going to return okay this is fine now what i'm going to do i have to change the value of this one so after completing the save from schwalte i have to trigger this one for that i am using this pipe concept inside the pipe i am going to use this tab this pipe tab everything is belongs to rxjs only oh it's showing error yes so we have to include it okay the errors got resolved so now i'm just changing the value our plan is i am going to subscribe this getter in my listing component so if there is any change so it will trigger automatically that means if i am saving any record i am just triggering this is refresh record so once its triggered in the triggering side i have to call this getall method so let me subscribe the creator here service dot require refresh okay fine okay this is fine here i'm going to call this getall method so we have to verify and before that we have to close the pop-up also for closing this pop-up so pop like dialog rough and matte dialogue rep so here we need to pass our component name that's it okay it's initiator so after the save gets completed i'm just calling this one that close up okay we have done it now i am going to create one more new record sunil yes athen.com add some phone number and the destination okay mainly cycle it's fine so if i'm saving i'm getting the same message the popup also automatically gets closed so the last added data is sunni so actually in the code it's a starting descending order that's what it's not coming the first it's actually coming the last page actually i'm not refreshed i'm getting this data so even if i'm searching also i will get the same information okay one point is we have finished so finally this edit until it is remaining so delete is little easy first i have to complete this one so after that i will go for this edit function first let me go to the listing side on the listing we already have the buttons so this is for ready the same way i hope to include this even for delete also delete it's added so after this is done so the input is code data type is cne here i'm just calling the services discard service dot and remove the input discord so once it's passed let me subscribe it so basically i have to check the response for the time consumption i'm not checking anything so after subscribed i'm just recalling this getall method here because i need to refresh the table once again and also i need to show the message so let me copy this alertify success once again but now we are including in our app component okay great so instead of this saved successfully removed successfully that's fine so let me delete it so if i am clicking this one zero three eight so it just to remove the record actually it's not the fair way if you are doing this remove operation you have to confirm with an user do you want to remove this record so let me implement this confirmation box so in the electrify js we have the options for creating this confirmation box also alertify.confirm here the first parameter is header remove employee and the second one is our message do you want to remove okay great so after that we have to use one callback function so basically in the callback function is just like a scenario and the final one is close for this close i am going to use okay fine so we have to write our coding in this confirmation side only so let me try once again so if i'm deleting i'm getting this popup do you want to remove and also i'm having this okay and cancel option and this remove employee so if i'm clicking this cancel so nothing will happen the same time if i'm clicking ok so it's just removed removed there successfully uh now see i'm just taking this one zero three six so the one zero three six it's gone so this is all about this uh delete function the file node is edit okay for this yet it first we have to load the existing data for doing this one we supposed to do in our common side only so here i am going to declare one variable edit data and one more function is load edits data so it's having one input is code and let me consume the services here so get employee by code here i'm just passing this code so after that i am going to subscribe it now this dot edd data equal to item so once i have the data i have to bind in the controls so actually we are using this reactive form so let me copy this form first so this dot reactive form we have the option is set value so our first field is name so here this dot edit data dot name the similar way we have to include all the fields actually our first field is code only just forget it so after that email then this phone and the fifth one is destination here also it's destination and the next one is gender the final one is his active showing some error we have to seal it later i hope everything gets resolved so even the order also creating issue basically it won't create because we are setting the exact parameters only so anyway i have to follow the order that's it okay our function is created and our second step is so this edit from swalt is starting from our app common because in the app component only we have this listing so as i mentioned i'm going to use the same model pop-up online so let me go to this app component so in this app component this ed section i basically will get this code value so this edit method i am going to open the popup this dot open dialog so the first input is in their animation duration thousand millisecond and the second one is for exit duration millisecond here i am going to pass one more parameter the code okay actually i'm not handled in my functions so let me pass it here now i'm going to modify function code any okay now again i'm getting the issue because in the add method i'm not past anything so that method i am going to give the empty value so when we are adding basically we don't have any value the edit time only we are getting this value that's all about the concept once we have this code we have to pass it here we have the parameter is called data so in the data m code equal to code so now we are just to pass the code value from our app component so thing is we have to access this employee code from our model component for accessing this one we have one option in this mat dialog the matte dialog data okay it's included and also i need to inject in the constructor so let me inject this matte dialog data here for that at inject so matte dialect data okay fine so basically i will get this value in this data so in the page load time first time verifying if this dot data dot m code because we passing is the m code only not equal to null and not equal to empty so in this scenario only i have to load this edit method so this dot load edit data equal to this data dot m code so let me edit this one so the datas are not load fade faith must supply value for the gender okay what i missed yeah in the service actually i don't have the fields for gender and insight you i just added the field for these two i'm going to provide the hard code value the mail and the site you also i'm going to pronounce the true so see now the records are got loaded so instead of this you must journey i am going to cure mahendra singh dhoni so if i have saved the popup automatically gets closed i'm getting this notification message see the text it's also updated automatically i'm just editing this narrate i'm going to provide so little naren and i'm changing the email also say if i'm saved it's updated and this email also updated okay our functionalities are completed so before closing the session i want the conveyor information so in the title itself i just mentioned reactive typed forms so the type to form feature is introduced in angular 14 only so the previous version 13 itself we don't have this feature so this is nothing but identifying our issues from our development side itself so basically we can get the form value using this forms dot value okay so it contains several fields so if i want get the name value i have to type like a name okay so in the previous versions we don't have this suggestions now i have the complete suggestion okay if i input a name so in case if i am providing n as a caps so it will throw an error and also the quick fix i am having the option change the spelling into name so in case if i am using this angular 13 i don't have the option well running time only i will get there okay this is one of the interesting feature so hope you got some better idea about this angular reactive forms with the credit operations and how to use this material ui components like model popup and checkbox and other controls still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 11,530

Keywords: angular 14 reactive forms, angular 14 typed forms, implement alertifyjs notifications, material ui modal popup, material ui dialog, how to pass data in material ui modal popup, material ui forms controls, angular 14 crud operations, alertify js confirm box example, angular 14 listing auto refresh, how to get data from material ui modal popup, material UI radio button, material ui checkbox, material ui select, how to consume .net core services in angular, angular 14 tutorial

Id: SMk-7jIxkoA

Length: 47min 7sec (2827 seconds)

Published: Fri Jul 08 2022