Angular 10 Reactive Forms Validation Example
Today, angular 10 reactive forms validation is our main topic. step by step explain angular 10 forms validation example. this example will help you angular 10 reactive forms example. We will look at example of reactive form validation in angular 10. Let's see bellow example angular 10 form validation example.
we will create reactive form step by step with validation like required, minlength, email etc with angular 10 application.
Reactive forms provide a model-driven approach to handling form inputs whose values change over the time. In Reactive forms, we need to import "ReactiveFormsModule" from angular forms library. we will use FormControl, FormGroup, FormArray, Validation classes with Reactive forms in angular 10 app.
If you have simple and basic form in your angular 10 application then i will prefer to use Reactive forms in angular. here i write simple example of Reactive forms with validation in angular 10.
You need to follow bellow step to create reactive forms in angular 10.
Step 1: Install Angular App
Here, in this step you need to create new ng app for this demo. if you have already created then don't create new angular 10 app.
ng new my-new-app
Step 2: Import FormsModule
If you want to create form in angular app then you need to import FormsModule from @angular/forms library. so let's add following code to 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';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
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 following code to app.component.html file.
I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 10.
src/app/app.component.html
<h1>Angular 10 Reactive Forms Validation Example - ItSolutionStuff.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.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-primary" type="submit">Submit</button>
</form>
Step 4: updated Ts File
In ts file. we will write submit() and get all input fields values. so let's add following code to app.component.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(){
console.log(this.form.value);
}
}
Now you can run your application using following command:
ng serve
Output
{name: "Hardik Savani", email: "itsolutionstuff@gmail.com", body: "This is a test"}
I hope it can help you...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- How to Use Sweetalert2 in Angular?
- Drag and Drop Image Upload in Angular Example
- Angular FormArray Example | FormArray in Angular
- How to Dynamically Add and Remove Form Fields in Angular?
- Angular Material Mat-Select with Reactive Form Example
- Angular Select Dropdown with Reactive Form
- Multiple File Upload in Angular Tutorial
- File Upload with Angular Reactive Forms Example
- How to use Datepicker in Angular 9/8?
- Angular NgClass - How to Add Dynamic Class in Angular 10/9/8?