Skip to content
Related Articles

Related Articles

Angular FormsModule Directive

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Jun, 2021
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!