This article explains how to use functional Angular forms. We will go through the process of setting the angular form with the verification form. we study angular forms for example.

We see an example of validation of the angular reactive form. I have easily explained the step-by-step verification of angular form. Follow the steps below to get an example of confirming angular form.

The active form provides a model-driven method for managing the change of the input of the form over time. For this working form, we need to enter "ReactiveFormsModule" in the angular form library. We will use FormControl, FormGroup, FormArray, a verification class with working angular forms.

We and you have a simple and basic form in the angular app so I will choose to use the working angular forms we learn angular forms for example. here I am writing a simple example of working angular verified forms.

You need to follow the step below to create active angular forms.


Step 1: Install Angular App

Here, in this step, you need to create a new ng-app for this demo. if you have already created then don't create a new angular.



Step 2: Import FormsModule

If you want to create a form in the angular app then you need to import FormsModule from @angular/forms library. So let's add the following code to the app.module.ts file.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';  // <----------------- This code---------------
   
import { AppComponent } from './app.component';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule, // <----------------- This code---------------
    ReactiveFormsModule // <----------------- This code---------------
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Step 3: Form with ngModel

In this step, we will write code of HTML form with ngModel. So add the following code to the app.component.html file.

src/app/app.component.html

<h1>Reactive Forms And Form Validation In Angular With 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">
        <span *ngIf="form.name.touched && form.name.invalid" class="text-danger">Name is required.</span>
    </div>
   
    <div class="form-group">
        <label for="email">Email</label>
        <input formControlName="email" id="email" type="text"  class="form-control">
        <span *ngIf="form.email.touched && form.email.invalid" class="text-danger">Email is required.</span>
    </div>
   
    <div class="form-group">
        <label for="body">Body</label>
        <textarea formControlName="body" id="body" type="text" class="form-control">  </textarea>
          <span *ngIf="form.body.touched && form.body.invalid" class="text-danger">Body is required.</span>
    </div>
  
    <button class="btn btn-primary" type="submit">Submit</button>
</form>


Step 4: updated Ts File

In this file, we will write submit() and get all input field values. so let's add the following code to the app.component.ts file.

src/app/app.component.ts

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

  ngOnInit(): void {

  }

  form = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', Validators.required),
    body: new FormControl('', Validators.required)
  });
 
  
  submit(){
    console.log(this.form.value);
  }
  
}


Now you can run your application using the following command:

ng serve

I hope it can help you...