Angular forms NgModel Directive

Angular FormsModule Directive

Last Updated : 04 Jun, 2021

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 forms from FormsModules.
In app.component.html, make a form using FormsModule.
Serve the angular app using ng serve to see the output.

Example 1:

app.component.ts

import { NgModule } from '@angular/core'; 
  
// Importing forms module 
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> 
  Roll: <input type="text" name = 'roll' ngModel> 
</form>

Output:

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

Angular forms NgModel Directive

taran910

News

Improve

Article Tags :

Similar Reads

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 for

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

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:

Angular forms NgForm Directive

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 Select

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 [

Angular10 NgFor Directive

In this article, we are going to see what is NgFor in Angular 10 and how to use it. NgFor is used as a structural directive that renders each element for the given collection each element can be displayed on the page. Syntax: <li *ngFor='condition'></li> NgModule: Module used by NgForOf

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.

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 Angula

Angular forms FormGroupDirective

In this article, we are going to see what is FormGroupDirective in Angular 10 and how to use it. FormGroupDirective is used to Bind an existing FormGroup to a DOM element. Syntax: <form [FormGroup] ="name"> Exported from: ReactiveFormsModule Selectors: [FormGroup] Approach: Create the Angular

AngularJS ng-mouseup Directive

The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements. Syntax: