Validation in Angular 8

                           Angular 8 -Validation in angular 8

  How to set Validation in Angular 8 using form control in simple input Fields. Like Name ,Relationship ,Contact number etc.In Contact number  maximum input is  10 digits and with the format of Number you want. Below is the form that looks like.

In this form there are three input fields .All these fields are require if any of the field not filled by user the same  message will show in the form .

Below is my Code in HTML

 <div class="right-side"> 
<input matInput placeholder="" maxlength="30 [formControl]="PrimaryNameFormControl" [readonly]="emergencyEdit" [(ngModel)]="EmployeeModel.PrimaryName">
                  <mat-error *ngIf="PrimaryNameFormControl.invalid">{{PrimaryNameRequiredErrorMessage()}}</mat-error>

                  <input matInput placeholder="" maxlength="30" [formControl]="PrimaryRelationshipFormControl" [readonly]="emergencyEdit" [(ngModel)]="EmployeeModel.PrimaryRelationship">
                  <mat-error *ngIf="PrimaryRelationshipFormControl.invalid">{{PrimaryRelationshipRequiredErrorMessage()}}</mat-error>

                  <input matInput placeholder="" maxlength="10" [formControl]="PrimaryContactFormControl" [readonly]="emergencyEdit" [(ngModel)]="EmployeeModel.PrimaryContact">
                  <mat-error *ngIf="PrimaryContactFormControl.invalid">{{PrimaryContactRequiredErrorMessage()}}</mat-error>


                 </div>

In this form Angular material is used for the error if input field is invalid.Now its Time to check the  function on page load. before that we will import 
"import { FormControl, Validators, FormGroup } from '@angular/forms';" on ts  Component.



My  Form.component.ts looks Like

  PrimaryNameFormControl = new FormControl('', [
    Validators.required,
  ]);
  PrimaryRelationshipFormControl = new FormControl('', [
    Validators.required,
  ]);
  PrimaryContactFormControl = new FormControl('', [
    Validators.required,
    Validators.required, Validators.pattern("[7-9]{1}[0-9]{9}")
  ]);

  PrimaryNameRequiredErrorMessage() {
    return this.PrimaryNameFormControl.hasError('required') ? 'You must enter a value' : '';
  }

  PrimaryRelationshipRequiredErrorMessage() {
    return this.PrimaryRelationshipFormControl.hasError('required') ? 'You must enter a value' : '';
 }
 PrimaryContactRequiredErrorMessage() {
    return this.PrimaryContactFormControl.hasError('required') ? 'You must enter a value' :
      this.PrimaryContactFormControl.hasError('pattern') ? 'Not Valid  Number' : '';

  }

  On the submit button you can also validate like Below.

 EmployeEmergencycontact ;

  Submit () {

      this.EmployeEmergencycontact = new EmployeeEmergrncyContact (
      this.EmployeeModel.PrimaryName,
      this.EmployeeModel.PrimaryRelationship,
      this.EmployeeModel.PrimaryContact,
    if (this.EmployeeModel.PrimaryName == "") {

      alert("Invalid PrimaryName ")

    } else if (this.EmployeeModel.PrimaryRelationship == "") {

      alert("Invalid PrimaryRelationship ")
    }

    else if (this.EmployeeModel.PrimaryContact == ""   ||  this.PrimaryContactFormControl.hasError('pattern') ? 'Not Valid  Number' : '') {

      alert("Invalid PrimaryContact ")
    }

 else {
       this.services.UpdateEmployeeEmergencyContact(this.EmployeEmergencycontact).subscribe(data   => {

        alert("Added Successfully");

      }, error => console.log(error)

      )
    }
  }