#6. Create Reactive Form and save data using API | Angular save form data using POST API
In this tutorial we will create POST API, test API using Postman. Then create reactive form using From Group and Form Control. Collect data from html to component file and then pass that data to service. Finally from the service will call API and save that data into server.
Create Reactive Form and save data using API | Angular save form data using POST API | JSON server API | Angular Project | Student Management with JSON server | Learning Points
If you are new in angular I recommend you please see full angular tutorial from here : • Angular Tutorial for B... .Here we have discussed each and every topic on Angular.
Next tutorial we will see how to set success message and how to get a fresh form after submit of form.
In this series we will going to create a simple CRUD application with angular and JSON server. Here Angular will use as a front end and we will get data through JSON server.
Please comment your feedback and support me by subscribing to this channel.
Chapters
00:00 Introduction
01:01 Create Reactive Forms
04:58 Create FormGroup
06:15 Data Binding
07:15 Save Functionality
09:19 Save data JSON server via POSTMAN
10:58 Call Service to save data
12:00 Create Service function
17:10 Conclusion & Next video topic
Laravel 9 New upgrades : • Laravel 9 New Features...
Laravel 9 Tutorial : • Laravel 9 Tutorial | L...
Express JS Tutorial : • Express Js Tutorial | ...
Full Node Js Tutorial : • Node JS latest version...
Full JWT Authentication tutorial in Laravel 8 : • Laravel 8 REST API Usi...
Full PHP tutorial : • PHP beginners to advan...
Full ECMA Script Tutorial : • ES6 | ECMA SCRIPT Tuto...
Laravel 8 tutorial : • Laravel 8 tutorial | L...
Angular Tutorial : kzread.infovideose...
Student Management Project : • Angular Project | Angu...
API tutorial with Laravel : • API tutorial from begi...
Livewire Tutorial : kzread.infovideose...
Full Stack Application Tutorial : • Full Stack Application...
Full Voyager admin panel tutorial: kzread.infovideose...
Advance PHP tutorial : • Advance PHP tutorial |...
PHP Interview Questions Answers : kzread.infovideose...
Follow in Facebook : / learningpointsdotin
Follow in Linkedin : / learning-points
Follow in Instagram : / learning_points
Visit Learning Points website for more topic : learning-points.in/
#angular #angular12 #angularproject #tutorial
Пікірлер: 43
Master!! This was so clean , precise and to the point just loved it. thankyou for making this.
@LearningPointsCourses
Жыл бұрын
Thank you
THANK YOU, I watched a million videos and this was the only one that helped me !
@LearningPointsCourses
4 ай бұрын
Thank you so much
Thanks for explaining save data concept in a very simple way. I am new to angular and this video helped me.
@LearningPointsCourses
8 ай бұрын
Glad it was helpful! Thanks 🤗
Thank you so much for this So simple and straight forward
Sir i got a problem... when the form is filled it shows the data except 2 input fileds... blood group and profile pic? How can I solve this problem
fantastic!!!!!!!!!!!!!
when I add a new object the id is not well incremented id: '5FudnAR', how can I solve it ?
Nice explanation... Very helpful video
@LearningPointsCourses
11 ай бұрын
Thank you 😊
Very helpful for begginer
@LearningPointsCourses
Жыл бұрын
Thank you
thank you so much for this video , it was very helpful
@LearningPointsCourses
4 ай бұрын
Thank you
Is this possible to store the json form to postgresql
helpful.........
@LearningPointsCourses
2 жыл бұрын
Thanks.
thanks to you
@LearningPointsCourses
Жыл бұрын
Welcome
Thanks
@LearningPointsCourses
2 жыл бұрын
Welcome
I can only post the default id field, although in the submit function I have console.log the data from the form. Can you help me?
@LearningPointsCourses
2 жыл бұрын
I need to check your code. May be it is data binding problem.
@longdang8264
2 жыл бұрын
@@LearningPointsCourses Thank you for your reply, I have fixed the error. It was due to my httpOptions config. ❤️
@LearningPointsCourses
2 жыл бұрын
@@longdang8264 Welcome ❤️
what if I also have a contact number in my json file. I followed this video and tried adding contact number in my json file, but it says null every time i try to console.log it like you did in the video to test if its working
@LearningPointsCourses
Жыл бұрын
It should work. No matter whether is contact number or some other data. Same logic.
hello i have a problem. when i insert data from add student, list student did not work.table is not update. can you help me pls.
@vigneshwaranb674
Жыл бұрын
Same problem facing did you solved
Why is the ID field randomized in mine, can I ask for help?
@ARUNKUMARS-xw8rd
5 ай бұрын
issue solved?
core.mjs:6485 ERROR TypeError: Cannot read properties of undefined (reading 'post') I am getting this error in console please help me
@LearningPointsCourses
2 жыл бұрын
It may be type mismatch error. Try to use specific type or if you don't know the specific type you can use any
Sir i tried this, i got 500 error , where i placed console in ts file after subscribe that.
@LearningPointsCourses
2 жыл бұрын
First console in service file. Make sure service is hitting properly. If inside service you got console output, then console from ts file. Console subscribed data inside closure function.
@thirumoorthy6835
2 жыл бұрын
Yes , i got console output in ts file and also service . File, after that i wrote subscribe code , inside subscribe i put console for checking my output is added or not
@thirumoorthy6835
2 жыл бұрын
And saved data is not adding in my json server database
@LearningPointsCourses
2 жыл бұрын
@thiru moorthy I think something you did wrong. Please check once. Without checking it is difficult to say. Make sure your json server also running.
@madhumitha4315
Жыл бұрын
@@LearningPointsCourses I also got same error sir
At the below line, i am getting the error "Property 'subscribe' does not exist on type 'void'" this.student.saveStudentData(this.addStudent.value).subscribe((result:any)=> Please suggest
@LearningPointsCourses
2 жыл бұрын
May be datatypes not matches with .ts file function. I need to see this to solve this problem.