Forms and Validation Ionic 4

                 In this tutorial you will learn how to validate ionic forms and validation

Step 1)

      Create a login form using for form group

 <form novalidate [formGroup]="signupform">

  <ion-input placeholder="User Name" id="rounded" color="light"

  [(ngModel)]="userData.username" formControlName="username" 

  [class.error1]="!signupform.controls.username.valid && signupform.controls.username.dirty">

 </ion-input>  
  <ion-item no-lines *ngIf="(signupform.get('username').hasError('minlength') ||

 signupform.get('username').hasError('pattern') ||signupform.get('username').

 hasError('required') ) && signupform.get('username').touched">  
    <div class="error" *ngIf="signupform.get('username').hasError('required') 

   && signupform.get('username').touched">  
     Please input your email  
    </div>  
    <div class="error" *ngIf="signupform.get('username').hasError('pattern') 

   && signupform.get('username').touched">  
     Email address invalid  
    </div>  
   </ion-item>  
  <ion-input placeholder="Password" type="Password" id="rounded" color="light"

  [(ngModel)]="userData.password" formControlName="password" [class.error1]

 ="!signupform.controls.password.valid && signupform.controls.password.dirty">

</ion-input>  
  <ion-item no-lines *ngIf="( signupform.get('password').hasError('minlength') 

 || signupform.get('password').hasError('maxlength') ||signupform.get('password')

 .hasError('required') ) && signupform.get('password').touched">  
    <div class="error" *ngIf="signupform.get('password').hasError('required')

    && signupform.get('password').touched">Please input your password </div>  
    <div class="error" *ngIf="signupform.get('password').hasError('minlength') 

    && signupform.get('password').touched">Minimum 6 characters</div>  
    <div class="error" *ngIf="signupform.get('password').hasError('maxlength') 

    && signupform.get('password').touched">Maximum 12 characters</div>  
   </ion-item>  
  <h3>Forgot UserName or Password?</h3>  
  <ion-button color="primary" id="button" (click)="signIn()" 

 [disabled]="signupform.invalid">Sign In</ion-button>  
 </form> 

Step 2)

  Write a script file to validate login form  

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

   Declare two variables  

     signupform: FormGroup;  

     userData = { "username": "", "password": ""};  
 

 Validate the email field using FormGroup validator  

   ngOnInit()   

  {  

   let EMAILPATTERN = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]

   ([a-z0-9-]*[a-z0-9])?(\.[a-z0-   9]([a-z0-9-]*[a-z0-9])?)*$/i;  
    

  this.signupform= new FormGroup({  
   username:new FormControl('', [Validators.required, Validators.pattern(EMAILPATTERN )]),  
   password: new FormControl('', [Validators.required, Validators.minLength(6), 

  Validators.maxLength(12)]),  
  

 });  

 Validators is used to enable the required field validator,set minimum and maximum length etc