As a newcomer to Angular, I am seeking assistance with validation in my Angular 5 application. Specifically, I need to validate user emails and only allow navigation to a new component when a valid email is entered upon clicking a button.
While pattern validation works correctly, I am facing an issue where the "Email is required" message does not display when the email field is touched but left empty.
Additionally, I require the button to be clickable only after a valid email is inputted by the user.
<div class="col-12">
<form>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="email" name="email" ngModel
#emailref="ngModel">
<div *ngIf="emailref.errors &&(emailref.touched || emailref.dirty)" class="alert alert-danger">
<div [hidden]="!emailref.errors?.pattern">
Invalid pattern
</div>
<div [hidden]="!emailref.errors?.touched">
Invalid pattern
</div>
</div>
<br>
<button type="submit" routerLink="/createaccount" class="btn btn-primary">
<i class="fas fa-user text-dark" style="font-size:20px"></i>
Create An Account
</button>
</div>
</form>
</div>
I would greatly appreciate any help in resolving these issues.