ngForm directive and form state in Angular

Introduction

The ngForm directive helps Angular track and manage the state of a form easily. It tells Angular to watch the form's inputs and know if the form is valid, dirty, or touched.

When you want to check if a user has filled out a form correctly before submitting.

When you want to disable the submit button until the form is valid.

When you want to show error messages only after the user interacts with form fields.

When you want to reset the form state after submission.

When you want to track if the user has changed any input in the form.

Syntax

Angular

<form #formName="ngForm">
  <!-- form controls here -->
</form>

The #formName="ngForm" creates a local variable to access the form's state.

You can use this variable to check properties like formName.valid, formName.dirty, and formName.touched.

Examples

This form disables the submit button until the email input is valid and filled.

Angular

<form #myForm="ngForm">
  <input name="email" ngModel required email />
  <button [disabled]="!myForm.valid">Submit</button>
</form>

Shows an error message only after the user has interacted with the form (dirty) and it's invalid.

Angular

<form #loginForm="ngForm">
  <input name="username" ngModel required />
  <input name="password" ngModel required type="password" />
  <p *ngIf="loginForm.dirty && loginForm.invalid">Please fill all fields correctly.</p>
  <button type="submit">Login</button>
</form>

Sample Program

This component uses ngForm to track the form state. The submit button is disabled until the form is valid. When submitted, it shows the entered data and resets the form.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-simple-form',
  template: `
    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
      <label for="name">Name:</label>
      <input id="name" name="name" ngModel required />

      <label for="age">Age:</label>
      <input id="age" name="age" ngModel type="number" required min="1" />

      <button type="submit" [disabled]="!userForm.valid">Submit</button>
    </form>

    <p *ngIf="submitted">
      Form Submitted! Name: {{ submittedData.name }}, Age: {{ submittedData.age }}
    </p>
  `
})
export class SimpleFormComponent {
  submitted = false;
  submittedData = { name: '', age: '' };

  onSubmit(form: any) {
    if (form.valid) {
      this.submittedData = form.value;
      this.submitted = true;
      form.resetForm();
    }
  }
}

Important Notes

The ngForm directive automatically creates a FormGroup behind the scenes.

Use formName.resetForm() to clear the form and reset its state.

Form controls must have a name attribute for ngForm to track them.

Summary

ngForm helps Angular track form inputs and their states.

Use the local form variable to check if the form is valid, dirty, or touched.

It makes managing form validation and submission easier and cleaner.