#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

  • @johnherrera5913
    @johnherrera5913 Жыл бұрын

    Master!! This was so clean , precise and to the point just loved it. thankyou for making this.

  • @LearningPointsCourses

    @LearningPointsCourses

    Жыл бұрын

    Thank you

  • @martinakuzmanovska8054
    @martinakuzmanovska80548 ай бұрын

    THANK YOU, I watched a million videos and this was the only one that helped me !

  • @LearningPointsCourses

    @LearningPointsCourses

    4 ай бұрын

    Thank you so much

  • @smitamayeedebata8234
    @smitamayeedebata82348 ай бұрын

    Thanks for explaining save data concept in a very simple way. I am new to angular and this video helped me.

  • @LearningPointsCourses

    @LearningPointsCourses

    8 ай бұрын

    Glad it was helpful! Thanks 🤗

  • @obasanyajanet7201
    @obasanyajanet72013 ай бұрын

    Thank you so much for this So simple and straight forward

  • @kaarthumbi
    @kaarthumbi6 ай бұрын

    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

  • @mohiburrahman5639
    @mohiburrahman5639 Жыл бұрын

    fantastic!!!!!!!!!!!!!

  • @ghodhbaniabderrahmen5433
    @ghodhbaniabderrahmen5433 Жыл бұрын

    when I add a new object the id is not well incremented id: '5FudnAR', how can I solve it ?

  • @zeeshanahmad-tx5hw
    @zeeshanahmad-tx5hw11 ай бұрын

    Nice explanation... Very helpful video

  • @LearningPointsCourses

    @LearningPointsCourses

    11 ай бұрын

    Thank you 😊

  • @adarshdwivedi5395
    @adarshdwivedi5395 Жыл бұрын

    Very helpful for begginer

  • @LearningPointsCourses

    @LearningPointsCourses

    Жыл бұрын

    Thank you

  • @mayssajbali7470
    @mayssajbali74707 ай бұрын

    thank you so much for this video , it was very helpful

  • @LearningPointsCourses

    @LearningPointsCourses

    4 ай бұрын

    Thank you

  • @shwethalathasaravanan6037
    @shwethalathasaravanan6037 Жыл бұрын

    Is this possible to store the json form to postgresql

  • @sanketdholu649
    @sanketdholu6492 жыл бұрын

    helpful.........

  • @LearningPointsCourses

    @LearningPointsCourses

    2 жыл бұрын

    Thanks.

  • @nashaatmohamed9433
    @nashaatmohamed9433 Жыл бұрын

    thanks to you

  • @LearningPointsCourses

    @LearningPointsCourses

    Жыл бұрын

    Welcome

  • @nambirajan8518
    @nambirajan85182 жыл бұрын

    Thanks

  • @LearningPointsCourses

    @LearningPointsCourses

    2 жыл бұрын

    Welcome

  • @longdang8264
    @longdang82642 жыл бұрын

    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

    @LearningPointsCourses

    2 жыл бұрын

    I need to check your code. May be it is data binding problem.

  • @longdang8264

    @longdang8264

    2 жыл бұрын

    @@LearningPointsCourses Thank you for your reply, I have fixed the error. It was due to my httpOptions config. ❤️

  • @LearningPointsCourses

    @LearningPointsCourses

    2 жыл бұрын

    @@longdang8264 Welcome ❤️

  • @alexisrivera8746
    @alexisrivera8746 Жыл бұрын

    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

    @LearningPointsCourses

    Жыл бұрын

    It should work. No matter whether is contact number or some other data. Same logic.

  • @mohiburrahman5639
    @mohiburrahman5639 Жыл бұрын

    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

    @vigneshwaranb674

    Жыл бұрын

    Same problem facing did you solved

  • @bluebrain7009
    @bluebrain70096 ай бұрын

    Why is the ID field randomized in mine, can I ask for help?

  • @ARUNKUMARS-xw8rd

    @ARUNKUMARS-xw8rd

    5 ай бұрын

    issue solved?

  • @srujanam4185
    @srujanam41852 жыл бұрын

    core.mjs:6485 ERROR TypeError: Cannot read properties of undefined (reading 'post') I am getting this error in console please help me

  • @LearningPointsCourses

    @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

  • @thirumoorthy6835
    @thirumoorthy68352 жыл бұрын

    Sir i tried this, i got 500 error , where i placed console in ts file after subscribe that.

  • @LearningPointsCourses

    @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

    @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

    @thirumoorthy6835

    2 жыл бұрын

    And saved data is not adding in my json server database

  • @LearningPointsCourses

    @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

    @madhumitha4315

    Жыл бұрын

    @@LearningPointsCourses I also got same error sir

  • @venkatamanne2803
    @venkatamanne28032 жыл бұрын

    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

    @LearningPointsCourses

    2 жыл бұрын

    May be datatypes not matches with .ts file function. I need to see this to solve this problem.