Angular forms NgForm Directive

Angular forms NgForm Directive

Last Updated : 24 May, 2021

In this article, we are going to see what is NgForm in Angular 10 and how to use it. NgForm is used to create a top-level form group Instance, and it binds the form to the given form value.

Syntax:

<form #FormName = "ngForm"> </form>

NgModule: Module used by NgForm is:

FormsModule

Selectors:

[ngForm]

Approach:

Create the Angular app to be used
In app.module.ts import FormsModule.
In app.component.html make a form and store its value in ngForm variable and show its value in a JSON form.
Serve the angular app using ng serve to see the output.

Example 1:

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 
import { AppComponent }   from './app.component';
 
@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    
  ]
})
export class AppModule { }

app.component.html

<form #gfgform = "ngForm">
  {{ gfgform.value | json }}
  <br>
  <br>
  Name: <input type="text" name = 'name' ngModel>
  Email: <input type="email" name = 'email' ngModel>
</form>

Output:

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

Angular forms NgForm Directive

taran910

Improve

Article Tags :

Similar Reads

Angular forms NgModel Directive

In this article, we are going to see what is NgModel in Angular 10 and how to use it. NgModel is used to create a top-level form group Instance, and it binds the form to the given form value. Syntax: <Input [(NgModel)= 'name']> NgModule: Module used by NgModel is: FormsModule Selectors: [ngMod

AngularJS ng-form Directive

The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [

Angular forms NgModelGroup Directive

In this article, we are going to see what is NgModelGroup in Angular 10 and how to use it. The NgModelGroup is used to create a top-level form group Instance, and it binds the form to the given form value. Syntax: <div ngModelGroup="name"></div> NgModule: Module used by NgModelGroup is:

AngularJS ng-focus Directive

The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements. Syntax:

Angular forms FormGroupName Directive

In this article, we are going to see what is FormGroupName in Angular 10 and how to use it. The FormGroupName is used to sync a nested FormGroup to a DOM element. Syntax: <form [FormGroupName] ="details"> Exported from: ReactiveFormsModule Selectors: [FormGroupName] Â Approach:Â Create the Ang

Angular forms FormArrayName Directive

In this article, we are going to see what is Style in Angular 10 and how to use it. The FormArrayName is used to sync a nested FormArray to a DOM element. Syntax: <div formArrayName="arrayName"> NgModule: Module used by FormArrayNameÂ is: ReactiveFormsModule Â Selectors: [FormArrayName] Approac

Angular FormsModule Directive

In this article, we are going to see what is FormsModule in Angular 10 and how to use it. The FormsModule is used to make all the necessary imports for form implementation. Syntax: import { FormsModule } from '@angular/forms'; Approach:Â Create an Angular app to be used.In app.component.ts import fo

AngularJS ng-if Directive

The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it

Angular forms FormControlName Directive

In this article, we are going to see what is FormControlName in Angular 10 and how to use it. FormControlName is used to sync a FormControl in an existing FormGroup to a form control element by name. Syntax: <form [FormControlName] ="name"> Exported from: ReactiveFormsModule Â Selectors: [Form