CODEWITHSUNDEEP
angular
stack questions
stack questions

Reputation: 982

Show message when inputs are valid in Angular 2

I am able to show valid message on my 2 inputs. Namely, UserName and Password using the code below:

<div class="input-field col s6">
    <input class="validate" type="text" name="UserName" #UserName="ngModel" [(ngModel)]="user.UserName" required minlength="3">
    <label [attr.data-error]="UserName.errors != null ? (UserName?.errors.required ? 'This field is required.' : 'Minimum length is 3') : ''">UserName</label>
    <div class="validated" *ngIf="UserName.errors == null">Username validation has passed.</div>
</div>
<div class="input-field col s6">
    <input class="validate" type="password" name="Password" #Password="ngModel" [(ngModel)]="user.Password" required  minlength="3">
    <label [attr.data-error]="Password.errors != null ? (Password?.errors.required ? 'This field is required.' : 'Minimum length is 3') : ''">Password</label>
    <div class="validated" *ngIf="Password.errors == null">Password validation has passed.</div>
</div>

But on my Email input field, I can show the error message if it is invalid but my valid message shows up even when I haven't done anything in my Email input field yet. Below is how I implement it:

<div class="input-field col s12">
    <input class="validate" type="text" name="Email" #Email="ngModel" [(ngModel)]="user.Email" [pattern]="emailPattern">
    <label data-error="Invalid email">Email</label>
    <div ng-messages="Email.$error" ng-show="userRegistrationForm.Email.$dirty"></div>
    <div class="validated" *ngIf="Email.errors == null">Email validation has passed.</div>
</div>

Can you help please? Thank you.

Upvotes: 2

Views: 142

Answers (1)

Pete
Pete

Reputation: 794

You can use dirty to check that the user has entered data into this field. Please see below:

<div class="input-field col s12">
<input class="validate" type="text" name="Email" #Email="ngModel" [(ngModel)]="user.Email" [pattern]="emailPattern">
<label data-error="Invalid email">Email</label>
<div ng-messages="Email.$error" ng-show="userRegistrationForm.Email.$dirty"></div>
<div class="validated" *ngIf="user.Email != '' && userRegistrationForm.controls.Email?.dirty && userRegistrationForm.controls.Email?.errors == null">Email validation has passed.</div>

Upvotes: 1

Related Questions