Software Developer
In Angular material, we have a module present already which can be used to create the form quickly, but to apply any kind of validation we have to follow the traditional approaches which are basically of two types. So we can combine the material module to create the forms and validation by using either of the two approaches we have, material in the build module will help us to build the forms quickly with all the fields with default tying and animation. We have to just simply put the components inside the inbuild material library, after any of the validation approaches we can choose.
As we know that this is something that is not present inside the material library, but still we have a module that helps us to create our forms easily.
<form [formGroup]="form name" (ngSubmit)="your method">
<mat-card-content>
<mat-form-field>
<input matInput type="text" formControlName="field name" id="name">
</mat-form-field>
</mat-card-content>
</form>
As you can see in the above syntax we are trying to use ‘form group’ with the name of the form and using ‘mat-form-field’ to create our form to take the user input.
In angular, we've got unique processes that may be used to implement the form validation. Why form validation is needed? The shape is used to take the entry from the person, but the consumer can input any incorrect values that can affect the commercial enterprise common sense of our utility. For that, we need to have shape validation in place, which improves the data which wishes to be entered with the aid of the person. Permit’s take an instance where builders have requested the consumer to enter his/her phone variety but mistakenly they have supplied some strings with it. So that you can validate the consumer information on the patron degree only we require form validation.
In angular, we have two different approaches that are template-driven and reactive forms both of them have their advantage and disadvantage and specific purpose when to use which one.
Code:
import { ReactiveFormsModule } from '@angular/forms';
Code:
import { FormControl, FormGroup, Validators } from '@angular/forms';
<mat-error *ngIf="your condition">Error message</mat-error>
Syntax:
<mat-hint >Hint Message</mat-hint>
Given below is the example mentioned:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<demo-validation'>loading</demo-validation'
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'demo-validation',
templateUrl: './demo-validation.component.html',
styleUrls: [ './demo-validation.component.css' ] })
export class AppValidationComponent implements OnInit {
public myForm: FormGroup;
constructor() { }
ngOnInit() {
this.myForm = new FormGroup({
myName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
myAddress: new FormControl('', [Validators.required, Validators.maxLength(50)]),
mycity: new FormControl('', [Validators.required, Validators.maxLength(10)])
});
}
public myError = (controlName: string, errorName: string) =>{
return this.myForm.controls[controlName].hasError(errorName);
}
}
<h4><u><i> Form Validation using Angular Material !!</i></u></h4>
<form [formGroup]="myForm" novalidate fxLayout="column wrap" fxLayoutAlign="center center" fxLayoutGap="10px">
<mat-card-content>
<mat-form-field>
<input matInput type="text" placeholder="Enter Name" formControlName="myName" id="myName">
<mat-hint align="end">Not more then 20 characters long.</mat-hint>
<mat-error *ngIf="myError('myName', 'required')">Name is required</mat-error>
<mat-error *ngIf="myError('myName', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
</mat-card-content>
<br />
<mat-card-content>
<mat-form-field>
<input matInput type="text" placeholder="Enter Address" formControlName="myAddress" id="myAddress">
<mat-hint align="end">Not more then 50 characters long.</mat-hint>
<mat-error *ngIf="myError('myAddress', 'required')">Address is required</mat-error>
<mat-error *ngIf="myError('myAddress', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
</mat-card-content>
<br/>
<mat-card-content>
<mat-form-field>
<input matInput type="text" placeholder="Enter City" formControlName="mycity" id="myAddress">
<mat-hint align="end">Not more then 10 characters long.</mat-hint>
<mat-error *ngIf="myError('mycity', 'required')">City is required</mat-error>
<mat-error *ngIf="myError('mycity', 'maxlength')">Limit exceed</mat-error>
</mat-form-field>
</mat-card-content>
</form>
import {NgModule} from '@angular/core';
import {MatFormFieldModule} from '@angular/material/form-field';
@NgModule({
exports: [
MatFormFieldModule
] })
export class MaterialValidationModule {}
import { NgModule } from "@angular/core"// other importsa
import { FormsModule } from "@angular/forms";
import { ReactiveFormsModule } from '@angular/forms';
import { AppValidationComponent } from "./app.component";@NgModule({
imports: [FormsModule, ReactiveFormsModule],
declarations: [AppValidationComponent],
bootstrap: [AppValidationComponent] })
export class AppValidationModule {}