Hello Devs,

In this tutorial, we are going to learn about  angular 10 formgroup tutorial.

Angular 10 FormGroup is very most important part of Reactive Form. FormGroup is one of the three fundamental building blocks used to define forms with FormControl and FormArray.

Create simple formgroup in angular 10 application with formcontrol as shown below:

form = new FormGroup({

    name: new FormControl('', [Validators.required, Validators.minLength(3)]),

    email: new FormControl('', [Validators.required, Validators.email]),

    body: new FormControl('', Validators.required)

});

Follow this step by step guide given below:




Install Angular App

ng new myFormGroup



Import FormsModule

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 { }



updated Ts File

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 {

   

  form = new FormGroup({

    name: new FormControl('', [Validators.required, Validators.minLength(3)]),

    email: new FormControl('', [Validators.required, Validators.email]),

    body: new FormControl('', Validators.required)

  });

   

  get f(){

      return this.form.controls;

  }

   

  submit(){

      if(this.form.status === 'VALID'){

        console.log(this.form.value);

      }

  }

  

  setValue(){

      this.form.setValue({name: 'Hardik Savani', email: 'itsolutionstuff@gmail.com', body: 'This is testing from itsolutionstuff.com'});

  }

  

  resetValue(){

      this.form.reset({name: '', email: '', body: ''});

  }

    

}



Form with ngModel

src/app/app.component.html

<h1>Angular 10 FormGroup Tutorial Example - Rathorji.in</h1>

  

<form [formGroup]="form" (ngSubmit)="submit()">

      

    <div class="form-group">

        <label for="name">Name</label>

        <input 

            formControlName="name"

            id="name" 

            type="text" 

            class="form-control">

        <div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">

            <div *ngIf="f.name.errors.required">Name is required.</div>

            <div *ngIf="f.name.errors.minlength">Name should be 3 character.</div>

        </div>

    </div>

   

    <div class="form-group">

        <label for="email">Email</label>

        <input 

            formControlName="email"

            id="email" 

            type="text" 

            class="form-control">

        <div *ngIf="f.email.touched && f.email.invalid" class="alert alert-danger">

            <div *ngIf="f.email.errors.required">Email is required.</div>

            <div *ngIf="f.email.errors.email">Please, enter valid email address.</div>

        </div>

    </div>

   

    <div class="form-group">

        <label for="body">Body</label>

        <textarea 

            formControlName="body"

            id="body" 

            type="text" 

            class="form-control">

        </textarea>

        <div *ngIf="f.body.touched && f.body.invalid" class="alert alert-danger">

            <div *ngIf="f.body.errors.required">Body is required.</div>

        </div>

    </div>

  

    <button class="btn btn-info" type="button" (click)="setValue()">Set Default Value</button>

    <button class="btn btn-info" type="button" (click)="resetValue()">Reset Value</button>

    <button class="btn btn-primary" type="submit">Submit</button>

</form>


Run this command:

ng serve


I hope this example helps you.