ngForm and ngModelGroup in Angular

Introduction

When we use <form> with Angular, it will automatically create a ngForm directive for that form. This directive will provide additional controls to track the state of the form. It has all the controls which we created for other fields using the ngModel directive. We can check the validity of the form using this form directive. If all the fields in a form are valid, then the form is considered valid.

ngForm

Angular by default add ngForm directive with <form> tag. It has all the child form controls registered with itself. To register every form control within this, we need to use fields with the name attribute. We will use a template variable to get a reference. 

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

This directive also has an output property called ngSubmit. We can use this property to raise custom events. We will use this as follows:

<form #f="ngForm" (ngSubmit)="submit(f)">
</form>

We have use ngSubmit as event binding here. submit function is defined as follows in the ts file.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-form',
  templateUrl: './app-form.component.html',
  styleUrls: ['./app-form.component.scss']
})
export class AppFormComponent {
  constructor( ) {
  }

submit(f){
   console.log(f); // Logs this object on the console
}
}

NgForm directive is an object which includes all properties like valid, invalid, pristine, touched, etc. We have the errors property as well which will tell us various errors present in the form as key-value pairs. The form property is of type FormGroup. FormGroup means many or group of input fields. ngForm will have the ngFormGroup object under the hood.
We can use the value property which is written as f.value. This property includes key-value pairs. The keys will be the name values assigned to the specific input field. The value indicates the value entered by the user in those fields.

ngModelGroup

ngModelGroup is a directive that is used as a child in <form> tag to create subgroups. Suppose we have a group called address which includes various fields like city, state, country, pin code, etc. We can associate ngModelGroup as a whole with this. We can have multiple ngModelGroup in one form. Every group can have different validation as per the user's requirement. We can import the directive together in a template variable to track its state. Inner form fields can be tracked as a group using ngModelGroup. It is also of type FormGroup.

<div ngModelGroup="address">
  <label>Street</label>
              <div>
                <input [(ngModel)]="street" placeholder="Enter street address" 
                 name="street"  #street="ngModel">
              </div>
           
              <label>City</label>
              <div>
                <input   [(ngModel)].city"    placeholder="Enter city" name="city" 
                  #city="ngModel" >
              </div>
             
              <label>State</label>
              <div>
                <input [(ngModel)]=.state" #state="ngModel" placeholder="Enter state"
                  name="state" >
              </div>
           
              <label class="req">Country</label>
              <div>
          <input [(ngModel)]="country" #country="ngModel" placeholder="Enter 
           country"    name="country" >
              </div>

              <label>Postal code</label>
              <div>
                <input#postalCode="ngModel"   [(ngModel)]="postalCode" 
                     placeholder="Enter postal code"  name="postalCode">
              </div>             
</div>

We can add validation error messages for one particular group together as follows by assigning the ngModelGroup control to a template variable that will have the same properties as key-value pairs such as valid, invalid, pristine, touched, value, etc.

<div ngModelGroup="address" #address="ngModelGroup">
<div *ngIf="!address.valid">Here we will all validation errors for this group</div>
  <label>Street</label>
              <div>
                <input [(ngModel)]="street" placeholder="Enter street address" 
                 name="street"  #street="ngModel">
              </div>
           
              <label>City</label>
              <div>
                <input   [(ngModel)].city" placeholder="Enter city" name="city" 
                  #city="ngModel" >
              </div>
             
              <label>State</label>
              <div>
                <input [(ngModel)]=.state" #state="ngModel" placeholder="Enter state"
                  name="state" >
              </div>
           
              <label class="req">Country</label>
              <div>
               <input [(ngModel)]="country" #country="ngModel" placeholder="Enter 
                country" name="country" >
              </div>

              <label>Postal code</label>
              <div>
                <input#postalCode="ngModel" [(ngModel)]="postalCode" 
                  placeholder="Enter postal code" name="postalCode">
              </div>             
</div>





Comments