Basic Form Validation

---

For create form you have to include following dependency in your component file.

                         	
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
							
						

HTML code for basic form validation

---

                         	
<form class="register-form m-4" [formGroup]="register" (ngSubmit)="onRegister()">
    <div class="row">
        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
            <mat-form-field class="example-full-width" appearance="outline">
                <mat-label>First name </mat-label>
                <input matInput formControlName="first" required>
                <mat-icon matSuffix>face </mat-icon>
                <mat-error *ngIf="register.get('first').hasError('required')">
                    First name is required
                </mat-error>
            </mat-form-field>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 mb-2">
            <mat-form-field class="example-full-width" appearance="outline">
                <mat-label>Last name </mat-label>
                <input matInput formControlName="last">
                <mat-icon matSuffix>face </mat-icon>
            </mat-form-field>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-2">
            <mat-checkbox class="example-margin" [(ngModel)]="agree"
                formControlName="termcondition">I accept terms
                and conditions
            </mat-checkbox>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-2">
            <button class="mr-3" mat-raised-button color="primary">Submit </button>
            <button type="button" mat-button>Cancel </button>
        </div>
    </div>
</form>
							
						

component ts file have following code

---

                         	
register: FormGroup;
 ngOnInit() {
    this.register = this.fb.group({
        first: ['', [Validators.required, Validators.pattern('[a-zA-Z]+')]],
        last: [''],
        termcondition: [false],
    })
 }
							
						

Install

---

                         	
npm i ngx-custom-validators --save
							
						

import FormsModule and CustomFormsModule in app.module.ts

---

                         	
import { FormsModule } from '@angular/forms';
import { CustomFormsModule } from 'ngx-custom-validators';
 
@NgModule({
    imports: [FormsModule, CustomFormsModule],
    ...
})
export class AppModule {}
							
						

HTML code

---

                         	
<!-- Range Validation -->
<mat-form-field class="example-full-width" appearance="outline">
    <mat-label>Range Between 5 to 9</mat-label>
    <input matInput type="number" formControlName="range" placeholder="Enter between 5 to 9">
</mat-form-field>
<mat-error *ngIf="customForm.controls.range.errors?.range" class="error-msg">
    Enter between 5 to 9
</mat-error>

<!-- Min value 10 -->
<mat-form-field class="example-full-width" appearance="outline">
    <mat-label>Min Value 10</mat-label>
    <input matInput type="number" formControlName="min" placeholder="Enter min value 10">
</mat-form-field>
<mat-error *ngIf="customForm.controls.min.errors?.min" class="error-msg">
    Enter minumum value 10
</mat-error>
							
						

Type	URL
Angular Form Validation	https://angular.io/guide/form-validation
ngx-custom-validators	https://www.npmjs.com/package/ngx-custom-validators