Angular CRUD - 1: How to insert data using API in Angular 16 CLI w/ Form Validation } Angular Tuts

hey guys welcome back so guys we are continuing our angular prod application using larval API so now guys in this video we are going to start with how to insert the data into our database using larval API okay so guys we have already seen that how to install the angular and create the project how to navigate through the pages in the previous video okay so now let's get started with directly creating the student page and its form for the insertion of data so now guys let's get back to the editor so as simple now make sure your NG is served and then let's go to the new bash and just create with the new student create component okay so NG generate component the I want to go inside the pages which I have already the pages folder here inside that pages I want to create a student create okay hit enter so here are my components created okay so now guys you can just follow here student app pages and student create and inside that we have a student create.html file okay so now here open and close div get started with H1 tag and this tell this as student create page okay save it and now we want to access this page so for that you can just go to the app routing dot module.ts file and inside this we are going to add the create a route okay so let us tell student s slash create as simple and we go to the student create page okay so student create component okay so the pages also is imported and here tell student create let's save so now guys let us copy this route and go to the browser and paste it so let's refresh here on this student create page awesome so now guys let's begin with the form design so to get back to your student create component where you are moving to the HTML and here is the HTML file done so let me just show you in the sidebar are simple so now guys add a container and inside this container I just want margin top five get started with the card card header with the headphone tag where student create and a simple a tag for the back button so right now we are going to give the Home Path and here router link okay and let's design this button button danger and this should be floating to end and then guys after the card header let's go to the card body and insert this card body your form starts so before that let us check this output let's save it and get back refresh and here is the output guys awesome and now guys let us create all the input Fields so what are the inputs fields we are going to create so let me just show you in the database so here is my table guys which is name course email N4 these are the four columns which we have to create as an input field and those input datas we are going to pass through the API and insert into this database okay so now guys let's get back to the form so form adding a margin bottom three a label name then input dot form hyphen control let me just resume it so we end this then guys you have to give the name attribute equal to name this will be the field name and same way we have to pass the mg model so NG model hit enter so this is a process how it comes now you have to pass name so now guys same way let us copy this and paste below for other four fields course okay paste here paste here and make it small done and email and then finally the last input that is before okay let's paste your phone done and now guys one more thing required a button okay so a simple button which will be save and let's design this button with the bootstrap class button primary and this button is going to be a type of submit submit all set so on this button click we have to do the NG submit okay NG sub MIT equal to and this will be inside a round bracket and here you have called to a sales student function as simple guys now the first step you have to go back to your the student create component.ts file let me show the filing also okay so this is a file and inside this file we have to specify all the form field names so here let us still Name colon which is going to be a string and then the course colon string email colon string and then phone colon string are simple so these are the four names which we have to call inside the form so this will understand but right now what it is telling here it is not able to get any data so for that you can just add this not symbol before each variable paste here all set guys so we have given all the variables and we get back to the HTML form so still we are getting the error here it's telling about the model so if you going to use NG model or NG submit you have to import some classes so you just need to move on the main app.module.ts inside this Imports you have to add that classes okay so that is nothing but the form forms module press Tab and it puts its class here okay so let me just push this at the top so it should be clear so now guys you have imported this form module and because of this your all unwanted errors goes close this file and then guys here you just need to copy this function and you need to move to your student create component.ts file and inside that only you have to create this function so now guys when you submit the form you should get all your input details so what we'll do we'll just keep inside one variable so let's tell where of input data equal to open and close curly brace and inside this we are going to tell this will be my name and then your this dot name okay this dot name is nothing but the variable what you are taken here so same concept CV then go for the course and this will be email and finally a phone pH or any phone so guys make sure you are passing this the correct name as per the API records so if you see in my API code let me just show you so this is my post of student control where I am going to save the data so here are my field names okay here are my input requests so whatever request I send from there it reads over here name course email and phone this data only will be over there okay so ignore that part guys if you want to learn about this how to create a API then you have to learn through this laravel and then come back to this and now let's do the HTTP call request so guys what we are going to do we will be taking a service from that service will be using the HTTP call so as simple let's get back to a new terminal so let's create a service in the angular Ng generate service inside the services folder I am going to create the student and hit enter so here you see let us go inside the app and inside the app you find that service service that is your student service so here will be all your HTTP calls so let's create one save student function and here you will get the input data and any we can send or if you are sure you are sending an object then you can type the object okay so if you see here we are sending actually the object on this this is an object variable so you send this right you can tell that in the student service yes I am sending the object on say student function and let's return and here we are going to call the HTTP client so before that you need to import that HTTP client in your app module.ts so let's go to app.module.ts file inside that here we are going to import the HTTP client module so just use comma and add that HTTP client CLI ENT client module and now you need to import this copy this and import use import open and close calibrase and this will be importing from the angular common HTTP and you need to and now you can use this HTTP client module inside your any pages so now you can get back on the service so we are going to use service right so here now in the Constructor let's call that HTTP client so just use private http client colon the http client hit tab so here is the HTTP client imported and then use this HTTP client for the request so this dot HTTP client dot the post method so we are going to save the data right so we'll be using post method to save the data okay so why I am facing this error oops so here you see I have pasted inside the wrong it should be inside the Constructor function guys okay not inside the curly price as simple and here till symbol and get the API URL so my API for this route so here you find this students on the post method it goes with the students so you have to paste the complete URL so right now I will just check out on the browser I have already served the URL guys so you can just copy this complete URL get back and paste here so perfect and with this only we'll be sending the data so what is the data it's the input okay so here you copy this input data and send it that's it guys all set let's save it and now you can get back to the form so on the student create component.ts file here you call your service so you have to create a Constructor Constructor open and close bracket and open and close calibration so now guys inside this Constructor you call your student service what service you have created here okay so let's tell private that is student service colon the student service okay student student service perfect so here if you see that it is imported on the correct file let us just go to that path so here you find okay so now guys you can just get back again and done so let's copy this and here let's begin with this dot student service dot the function name so it's already suggesting it that is to save student function dot subscribe function and here inside the Subscribe open and close curly brace and use next colon function and open and close so guys this is a new updated in the HTTP subscribe okay so now here you get for the error colon open and close function open and close calibrice so here you pass the error and this will be a response so res response so whatever response you get you just need to console.log here so response and what kind of response you'll be getting I don't know what kind of response I get so I just put any and what kind of error also I get in the response I don't know so I'll put any Here and Now guys in this inside the save student function it is asking for some data over here so what data that is nothing but our input data we take that and pass it inside this function and this student save student function goes to the student service which is calling that HTTP client post request okay so now get back and copy this and paste inside the error also so let's tell err error comma here these are errors and this is the your response so response okay let's save it so now guys you get back and refresh here and make sure you inspect your console log and now if I click on directly on Save let's see what happens click save so here you face guys that the post request of this URL is Port 22 okay unprocessable content so which means it's telling all the input field is required so I'll just show you in that if you go inside your network and just move to that student you find that errors okay so this is the errors and you might see in the console log also that is your errors which is the and here inside that error error and errors so we need to get error dot error dot errors and then all the column field names so as simple let's get back here error dot error Dot errors okay so we need to keep this in one variable so we'll tell this dot errors error OS and here we paste so now you need to create one array for this let's get back on the top error colon any kind of data it might be and it should be a array a simple guys and now you use this inside this dot errors and get all the error list as simple guys and now let us just use this inside the HTML form to view the error list okay so go to your student create component.html file and just below your input tag use a span tag and insert that span tag NG if condition so this will be errors dot name and let's copy this and you need to show inside open and close curly brush error.nip and here let's use our text Danger and let's paste here same thing for the course paste it paste it let's copy again for the email let's copy paste paste same for the phone copy paste and paste save it guys now let's get back and refresh once and click on save button so if I click here you find that the name field is required the course is required perfect and now if you type anything click here save so it goes the error also okay now guys let us submit with the correct data enter ohm prakash BCA home at gmail.com here 10 digit phone number okay one two three four five six seven eight nine ten and now let's click on save so what will be the response so here you see guys that we have got the response in the console log and in that you have got the message that is student created successfully so guys once this record is created we want to empty all these fields and I'll show the alert message so for that you can just get back and move to the component.ts file so here inside this success just use the alert function response Dot message and once the data is saved we need to clear the input field this dot name equal to null a simple same way guys for all other fields which is course email and phone save it all done guys and let me just show you with one more saving record so before saving one new record I just wanted to set a loader type okay so when I click on this save button it should show that it is saving and it should show a loading option so for that guys you can just use a simple spinner from the get bootstrap let's go to the docs and here spinner so here is a design guys so we are going to use this so what we can do let us create a component okay so we can use it in the further crud okay so NG generate compo length space and you go inside the pages partial inside this partial I want to keep that loaded so Pages forward slash partials forward slash the loader hit enter okay so we go inside the partials we have that loader awesome so let's go on this component.ts file and paste it the HTML code let's paste here all done and here you pass a title guys so if we send a custom title so that time it should show what title we have passed to access this title you have to go to your loader and inside this you just need to paste that title colon it is a string so let's mention that it is a string equal to inside single quotes let's tell loading so by default we'll keep the loading only and you can get back again here and just add dot dot dot okay so we are setting this by default loading and now guys you can get back on the student create component dot HTML file and before this form submit let's create one Dev tag open and close div use ngf okay NG if where is loading okay when it is loading you are going to call your loader component so just use app hyphen then the component name that is your loader okay and this loader so if you want to pass the title you can just add a colon title here okay equal to the custom title okay so I will mention loading title and now guys here I just want to add the else condition also okay so just give semicolon is else and this will be your else block okay not block else let's keep it else form okay and now you have to use a NG template template let me break this so we are just going to remove everything we don't need these things just it will hashtag and paste that else form okay and now you paste the complete form inside your NG template and now what you have to do we have to create this is loading and loading title variable inside your student create component.ts file so let's move on the top and here I tell that is loading colon which is going to be a Boolean equal to so by default it will be false and now you copy this and just go below so once the student save is clicked that time this dot is loading is going to be true okay once it is Success you are going to tell is loading will be false okay make sure you are doing after clearing the data same with the error part also so here once the display error and set it to false as simple let's save and now let's let us check this output so before checking the output we are missing one more thing that is your loading title okay so let's copy this loading title and get back here so once this save student is clicked this dot loading title equal to inside single quotes you have mentioned that it is saving okay I think we did not create a variable let's create that also loading title colon equal to string by default we will set it to loading itself okay let's save it and now let's get back so yep once refresh and now I'm directly going to click on Save so here you see the loading shows perfect so I see one extra bracket I don't know where this is let me just check out let's go on the HTML so here you see guys that extra thing let me remove that okay all set let us save and it has gone awesome so yep guys so guys we have successfully seen that how to insert the data into our database using laravel API in angular so let me just show you in the database awesome okay so guys in this video that's it and let's continue in the next video how to fetch this datas from your database inside your angular product application with the API okay so now guys in this video that's it thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 4,411

Keywords: fundaofwebit, How to insert data using API in Angular 16 CLI, insert data in angular using api, create form and insert data using api in angular cli, how to insert data using api in angular, angular crud with api, angular crud with web api, angular crud example with web api, angular 16 crud tutorial, angular cli crud tutorial, store data with api in angular, angular with laravel api, laravel api with angular crud

Id: axB9RNjvjOU

Length: 25min 9sec (1509 seconds)

Published: Thu Jun 01 2023