Angular 10 formgroup tutorial with example

Hello friends, we will explain to you about angular 10 formgroup tutorial with example. here we will create formgroup validation in angular 10.

The FormGroup is used to build form and we will use various methods of FormGroup like setValue, removeControl, registerControl, setControl, reset, etc.

Create new angular app

We will create a new angular app using the following command.

ng new myNewApp
cd myNewApp

when you create your application at that time Angular CLI asks you Would you like to add Angular routing? (y/N). If you enter with y for Yes. then the angular router will be automatically configured.

App Component

src/app/app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myNewApp';
  constructor() { }

  ngOnInit(): void {
    
  }
  
  addForm = new FormGroup({
    first_name: new FormControl('', Validators.required),
    last_name: new FormControl('', Validators.required),
    address: new FormControl('', Validators.required)
  });
   
  get f(){
      return this.addForm.controls;
  }
   
  onSubmit(){
      if(this.addForm.status === 'VALID'){
        console.log(this.addForm.value);
      }
  }
  
  setValue(){
      this.addForm.setValue({first_name: 'xpert', last_name: 'php', address: 'xyz'});
  }
  
  resetValue(){
      this.addForm.reset({first_name: '', last_name: '', address: ''});
  }
}

src/app/app.component.html

<div class="col-md-6 container">
  <h2 class="text-center">Add Student</h2>
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

    <div class="form-group">
      <label for="first_name">First Name:</label>
      <input formControlName="first_name" placeholder="First Name" name="first_name" class="form-control" id="first_name">
	  <div *ngIf="f.first_name.touched && f.first_name.invalid" class="alert alert-danger">
        <div *ngIf="f.first_name.errors.required">FirstName is required.</div>
      </div>
    </div>

    <div class="form-group">
      <label for="lastName">Last Name:</label>
      <input formControlName="last_name" placeholder="Last name" name="last_name" class="form-control" id="last_name">
	  <div *ngIf="f.last_name.touched && f.last_name.invalid" class="alert alert-danger">
        <div *ngIf="f.last_name.errors.required">LastName is required.</div>
      </div>
    </div>
	
	<div class="form-group">
      <label for="address">Address:</label>
      <input formControlName="address" placeholder="Address" name="address" class="form-control" id="address">
	  <div *ngIf="f.address.touched && f.address.invalid" class="alert alert-danger">
        <div *ngIf="f.address.errors.required">Address is required.</div>
      </div>
    </div>

	<button class="btn btn-primary" type="button" (click)="setValue()">Set Default Value</button>&nbsp;
    <button class="btn btn-info" type="button" (click)="resetValue()">Reset Value</button>&nbsp;
    <button class="btn btn-success">Add</button>
  </form>
</div>

Angular 10 App Module

finally, we will import the module in this file. so you can see the below example.
src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
	FormsModule,
	ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run Angular Application

Now we will run our Angular application using the below command.

ng serve