Angular 17 Reactive Forms Validation Example

Reactive form validation in angular 17; In this tutorial, we will show you how to create and use form validation with reactive form in angular 17 applications.

Angular 17 Reactive Forms Validation Example

Using the following steps, you can create and use reactive Form with validation in the angular 17 apps:

• Step 1 – Set up a new Angular project
• Step 2 – Import Form Module
• Step 3 – Create a Reactive Form
• Step 4 – Update Component ts File
• Step 5 – Start Angular App

Step 1 – Set up a new Angular project

First of all, open your command prompt or cmd and execute the following command into it to install the angular apps into your system:

ng new my-new-app

Step 2 – Import Module

Now, you need to open app.module.ts to import some modules. So, go to src/app/ directory and open the app.module.ts file.

Then import ReactiveFormsModule in this file, as follows:

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

Step 3 – Create a Reactive Form

Next, you need to create a simple reactive form with input file element. So, visit src/app directory and open app.component.html file.

Then add the following code into it for simple reactive form in angular apps; as follows:

<h1>Angular 17 Reactive Forms Validation Example - Tutsmake.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">
        <div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-danger">
            <div *ngIf="f['name'].errors && f['name'].errors['required']">Name is required.</div>
            <div *ngIf="f['name'].errors && 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 && f['email'].errors['required']">Email is required.</div>
            <div *ngIf="f['email'].errors && 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 && f['body'].errors['required']">Body is required.</div>
        </div>
    </div>
    
    <button class="btn btn-primary" [disabled]="form.invalid" type="submit">Submit</button>
</form>

Step 4 – Update Component ts File

Visit the src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:

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(){
    console.log(this.form.value);
  }
  
}

Step 5 – Start Angular App

In this step, execute the following command on the command prompt or cmd to start the angular project:

ng serve

Navigate to http://localhost:4200 in your web browser to see the form with validation in action.

Conclusion

That’s it! You now have a working Angular 17 reactive form with validation. As a user interacts with the form, the validation messages will appear dynamically based on the defined validation rules.

Recommended Tutorials