Hi everyone;
I’m trying to add a reactive logIn form too my application; added some default and costume validation and it works! but Im having problem showing the validation error… it only shows the “email is required” or “password is required” and doesn’t show the other validation error. please HELP!
Here is the HTML code:
<form [formGroup]="logInForm" (ngSubmit)="letIn()" class="myFormStyle">
<ion-item >
<ion-label>Email</ion-label>
<ion-input type="email" formControlName="username"></ion-input>
</ion-item>
<ion-item>
<div *ngIf=" !this.username.valid &&(username.dirty || username.touched)" >
<div *ngIf="username.errors.required">Email is required</div>
<div *ngIf="username.errors.patternValidator">Not valid email</div>
</div>
</ion-item>
<ion-item>
<ion-label>PassWord</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-item>
<div *ngIf="password.invalid && (password.dirty || password.touched)">
<div *ngIf="password.errors.required">password is required</div>
<div *ngIf="password.errors.patternValidator">your password must include at least one digit and a lowercase word and an uppercase word</div>
</div>
</ion-item>
<button ion-button color="mycolor1" block type="submit" (click)="letIn()" [disabled]="logInForm.invalid">Log In</button>
<button ion-button class="helpButton" color="dark" clear>Forgot your password?</button>
</form>
and its my form:
this.logInForm = fb.group({
'username': ['', Validators.compose( [Validators.required, patternValidator(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)])],
'password': ['',Validators.compose([Validators.required, Validators.minLength(5), patternValidator(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$/)])]
})