Understanding of submitting and resetting function in angular 4
Posted By : Monu Thakur | 29-Sep-2017
1)Submitting
To submit a form in Angular, we need a button with the type of submission in our markup form between form tags, such as:
When we press this submit button, this triggers the mechanism for submitting a standard HTML5 form, so try POST the form for the current URL.
However, instead of publishing a standard POST, we want to call a function on our component, to do so we use the ngSubmit directive and add it to the form element as follows:
It belongs to the normal form submission mechanism and invokes the onSubmit () function on our components. Impossons onSubmit () with lines easy.log like:
onSubmit() {
if (this.myform.valid) {
console.log("Form Submitted!");
}
}
Now when we press the Send Submit button Send! got impressions on the console.
2)Resetting
In the form driven by the template to reset the form, just recall the re-function () on our myform template.
For our sample form, reset the form in the onSubmit () function, for example:
onSubmit() {
if (this.myform.valid) {
console.log("Form Submitted!");
this.myform.reset();
}
}
The reset form, all input fields return to their initial state and all valid, hit, or dirty properties are also reset to their initial values.
We can bind the command prompt of the output command to call the function on our component when the user sends the form.
Calling the reset function on the form template resets the form to its original state.
We can call a function on our component to process the form. However, Angular gives us another way to deal with the values of the form, using reactive programming and RxJS, we will discuss it at the next conference.
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Monu Thakur
Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.