fetch

Angular Forms Tutorial - 12 - Submitting form data



Sharing buttons:

now that we have a good understanding of

how to bind form data and validate the

form the next step is to learn how to

post the form data to a server we are

not going to discuss how to store it in

the database that's outside the scope of

this course you can take a look at the

mean stack tutorial on my channel to

learn more about crud operations in this

video we are going to focus on

submitting the form data the first step

is to add the no valid attribute on the

form tag so no validate this will

prevent browser validation from kicking

in when we click on the submit button

the next step is to bind to the ng

submit event which gets emitted when the

submit button is clicked so on the form

bind to ng submit and assign a handler

called on submit next let's define this

on submit event handler so in app

component class on submit and for now

let's log to the console the user model

so console dot log this dot user model

let's save this head to the browser open

dev tools select a topic

and click on submit you can see that the

user object is logged in the console now

to be able to send this data to a server

we need to make use of a service so

let's create a new enrollment service

using the CLI so in the terminal control

backtick

navigate inside the project folder and

run the command in G G for generate s

for service and name of the service

which is enrollment the command will

generate enrollment dot service dot TS

over here the first step is to import

httpclient and then injected so import

and then in the constructor injected we

also need to include the module in app

dot module dot TS so import HTTP client

module and then add it to the imports

array all right now we are in a position

to make HTTP requests back in the

service let's add a new property called

URL this will be the URL to which we

post the data I'm going to leave it

blank for now and fill it up in the next

video next we are going to create a

method called enroll which will make the

post request the method will accept an

argument user which is of type user also

make sure to automatically import it and

within the body we make our post request

this dot HTTP dot post of type any the

first argument is the URL so this dot

URL and the second argument is the user

object

let me quickly correct this there we go

alright so the post request will return

the response as an observable so we need

to subscribe to the observable in app

component so in AB dot component

dirtiest first import the enrollment

service and then inject it import and

then in the constructor injected now in

the on submit method we call the enroll

service method and then subscribe to the

observable so instead of console.log

this dot enrollment service dot enroll

we pass in the user model and then we

subscribe to the response

when we get valid data let's lock that

to the console so console dot log

success and then the data if there was

an error let's lock that to the console

as well so console dot error error and

then error now we get a red squiggly

over here

so let's go back to enrollment service

and make sure to return this so return

this dot HTTP dot post all right that is

pretty much the angular side of form

submission we listen to the ng on submit

event and call the on submit method the

on submit method makes a call to the

enroll method passing in the user model

the on submit method makes a call to the

enroll service passing in the user

object in the enroll service we make the

actual HTTP request and send the data to

the server right now we don't have a URL

endpoint to make the request so in the

next video let's create a simple Express

server that accepts a post request from

our angular application I'll see you

guys in the next video