Angular 17 Reactive Forms Validation Example

[ad_1]

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.

Ezoic

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 FileEzoic
  • 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.

Ezoic

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.

Ezoic

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:

Ezoic

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:

Ezoic

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

[ad_2]

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518