AngularJS Forms ngSubmit() Method

Last Updated : 14 Jun, 2021

In this article, we are going to see what is ngSubmit method in Angular 10 and how to use it.

The ngSubmit() method is called when the 'submit' event is triggered on the ngForm.

Syntax:

<form (ngSubmit)='method($event)'></form>

Parameters:

$event: the "submit" event object

Approach:

Create an Angular app that to be used.
In app.component.ts, make an array that takes the value from the form.
In app.component.html, make a form and send the value using (ngSubmit) method.
Serve the angular app using ng serve to see the output.

Example:

app.component.ts

import { Component, Inject } from '@angular/core';
import { FormGroup, FormControl, FormArray, NgForm } from '@angular/forms'
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    submit(form: NgForm) {
        console.log(form.value);   
    }
}

app.component.html

<form #form="ngForm" (ngSubmit)="submit(form)" novalidate>
    <input name="first" ngModel required #first="ngModel">
    <input name="last" ngModel>
    <button>Submit</button>
</form>

Output:

Reference: https://angular.io/api/forms/NgForm#onsubmit

AngularJS Forms ngSubmit() Method

taran910

Improve

Article Tags :

AngularJS Forms ngSubmit() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?