FormGroup and FormBuilder in angular

Git Repository

Table Of Content

• Introduction to FormGroup
• Usage of FormGroup
• Patch values to form
• Access the values
• Display required messages
• Submit the form

Introduction to FormGroup

Many model controllers use the FromGroup to bind under a single form. angular FormGroup class is more useful when there are many fields of the form and need to tracks the value & validity of these fields.

Usage of FormGroup

Add the form modules metadata to the module class.

module.ts

// other imports ...
import { FormsModule ,ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule,
    FormsModule
  ],
})
export class AppModule { }
}

Create an instance of FormGroup in the component class then create a property named pocForm, and set the property to a new form group instance. To initialize the form group, provide the constructor with an object of named keys mapped to their control.

component.ts

import { FormBuilder , Validators } from '@angular/forms';

constructor(private fb: FormBuilder) { }

 pocForm = this.fb.group({

    firstName  : ['' , [Validators.required]],
    lastName   : ['' , [Validators.required]],
    nicNumber  : ['' , [Validators.required]]

  });

To bind form group to template need to use [formGroup] directive with form controllers.

component.html

<form [formGroup]="pocForm"  (ngSubmit)="onSubmit(pocForm)">
      <mat-form-field >
         <mat-label>First Name</mat-label>
         <input matInput formControlName ="firstName">
      </mat-form-field>
      <mat-form-field >
         <mat-label>Last Name</mat-label>
         <input matInput formControlName ="lastName">
      </mat-form-field>   
      <mat-form-field >
         <mat-label>Nic</mat-label>
         <input matInput formControlName ="nicNumber">
      </mat-form-field>   
      <button mat-flat-button   [disabled]="pocForm.invalid" 
       type="submit"  >Submit</button>
</form>

Patch values to form

patchValue() values ​​are used to set values controllers in formGroup.

component.ts

  patch(){
    this.pocForm.patchValue({
      firstName: 'dev'
    })
  }

Access the values

Using form controllers can access the form values in here show access the value of firstName.

component.ts

  fValueName(){
    this.pocForm.controls['firstName'].value;
  }

Display required messages

There are many ways to display warning messages in angular. In here listen to the form controller status and display the error message.

component.ts

 get f(){
    return this.pocForm.controls;
  }

component.html

    <mat-form-field>
     <mat-label>First Name</mat-label>
     <input type="text" matInput formControlName="firstName">
        <div  class="errorMessage" *ngIf="f.firstName.invalid 
              && (f.firstName.dirty || f.firstName.touched)">
                   <div *ngIf="f.firstName.errors?.required">
                   First Name Required
                  </div>  
        </div>
     </mat-form-field>

Submit the from

To submit form details use ng event binding.

component.ts

 onSubmit(form: any) {
    if(this.pocForm.valid){
    console.log('Your form data : ', form.value);
    }
  }

Comments

[steve-kent]

I think you have a typo. In your ts the FormGroup object name is "profileForm". In the html it's "pocForm".
Also just noticed that in the text of the blog you said you were going to name it "myForm" I think.

[Dinuka Darshana]

It is fixed. Thanks for the notice.