Reactive Forms And Form Validation In Angular With Example

This article explains how to use Angular reactive forms. We will walk through how to set up an angular form with form validation. we learn angular forms example.

We see an example of angular reactive forms validation. I explained simply step by step angular form validation. Follow the below step for the angular form validation example.

The reactive form provides a model-driven approach to handling form inputs value change over time. In this form reactive form, we need to import "ReactiveFormsModule" from the angular forms library. We will use FormControl, FormGroup, FormArray, Validation class with Reactive forms in angular.

We and you have a simple and basic form in an angular application then I will prefer to use Reactive forms in angular we learn angular forms example. here I write a simple example of Reactive forms with validation in angular.

You need to follow the below step to create reactive forms in angular.

Reactive Forms And Form Validation In Angular With Example

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 - phpcodingstuff.com</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

Output

{name: "Robert Look", email: "phpcodingstuff@gmail.com", body: "Welcome to Php Coding Stuff"}

Conclusion

I learned in an angular reactive form that how we do form validation in Angular reactive form and make it very easy. We learn angular forms example.

I hope it can help you...

Example Angular

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.