AngularJS ng-form Directive

Angular forms NgModel Directive

Last Updated : 23 Jul, 2025

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:

[ngModel]

Approach:

Create the Angular app to be used
In app.component.ts make a variable that gives value to the input field.
In app.component.html make a form and use ngModel to get the value of the input.
Serve the angular app using ng serve to see the output.

Example 1:

app.component.ts

import { Component, Inject } from '@angular/core';
  import { PLATFORM_ID } from '@angular/core';
  import { isPlatformWorkerApp } from '@angular/common';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    gfg: string = '';

  setValue() {
    this.gfg = 'GeeksforGeeks';
  }
  }

app.component.html

<h1>GeeksforGeeks</h1>

<input [(ngModel)]="gfg" #ctrl="ngModel" required>


<p>Value: {{ gfg }}</p>



<button (click)="setValue()">Set value</button>

Output:

Reference: https://v17.angular.io/api/forms/NgModel

AngularJS ng-form Directive

T

taran910

Improve

Article Tags :

Similar Reads

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 [

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:

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:

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: