HTML | DOM Form submit() Method

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

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

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

HTML | DOM Form submit() Method

taran910

Improve

Article Tags :

Similar Reads

AngularJS ng-submit Directive

The ng-submit Directive in AngularJS is used to specify the functions to be run on submit events. It can be used to prevent the form from submission if it does not contain an action. It is supported by <form> element. Syntax: <form ng-submit="expression"> Content ... </form>Paramet

AngularJS Factory Method

AngularJS Factory Method makes the development process of AngularJS applications more robust. A factory is a simple function that allows us to add some logic to a created object and return the created object. The factory is also used to create/return a function in the form of reusable code which can

HTML | DOM Form submit() Method

The form submit() Method in HTML DOM is used to send the form data to the web-server. It works as same as submit button. It does not contain any parameters. Syntax: formObject.submit()Example: [GFGTABS] index.html <!DOCTYPE html> <html> <head> <title> HTML DOM Form submit() M

AngularJS | Forms

Forms are collection of controls that is input field, buttons, checkbox and these can be validated real time. As soon as a user of the form completes writing a field and moves to the next one it gets validated and suggests the user where he might have went wrong. So a form can be consisting of the m

AngularJS Form Validation

AngularJS performs form validation on the client side. AngularJS monitors the state of the form and input fields (input, text-area, select), and notify the user about the current state. AngularJS also holds information about whether the input fields have been touched, modified, or not. Form input fi

Format a Date using ng-model in AngularJS

The ng-model directive is used to bind the value of the input field to a property made in the controller. Formatters are used to convert the value of input from one textural representation to another desired representation. Formatters used for date formatting are useful when the date needs to be upd

AngularJS form.FormController

AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. In this article, we'll learn about the AngularJS form.Form

How to Implement Angular Forms?

Creating a Form in Angular includes the use of directives such as ngSubmit and ngModel. We will be using a functional component to render the elements. Various HTML elements are created in the project. To implement the project we will create the styling using CSS. Prerequisites:Functional Components

How to get form input value using AngularJS ?

Given a form element and the task is to get the form values input by the user with the help of AngularJS. Approach: We are storing the data in the JSON object after the user enters it in the input element with the help of the Angular.copy(object) method. After that, data from the JSON object can be

AngularJS ng-model Directive

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.