how to show validate message in form in angular 2?

Question

I am trying to show validate message in form in angular 2 ? I am getting this error

Cannot read property 'hasError' of undefined

I added these lines

 <div *ngIf="username.hasError('required') && username.touched" 
           class="error-box"> username is required</div>    
       <div *ngIf="username.hasError('minlength') && username.touched" 
           class="error-box"> Minimum password length is 8!</div>

here is my code https://plnkr.co/edit/slhySWT0mJXkloGK1kfO?p=preview

Pankaj Parkar · Accepted Answer · 2016-07-13 16:22:30Z

2

This should do what you want:

<ion-input type="text" ngControl="username" #username="ngForm"></ion-input>

 <div *ngIf="username.errors?.required && username.touched" 
           class="error-box"> username is required</div>    
       <div *ngIf="username.errors?.minlength && username.touched" 
           class="error-box"> Minimum password length is 8!</div>

Plunker example

edited Jul 13, 2016 at 16:22

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered May 25, 2016 at 5:49

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pardeep Jain Over a year ago

this is elvis (?) operator, this prevents throwing error when variable is undefined

Günter Zöchbauer Over a year ago

Sorry, wrong position. errors can be null, username not. And yes, like @PardeepJain mentioned this is to avoid error messages when errors is null. ?. is called safe-navigation or Elvis operator which only evaluates the expression after ?. when the part before is not null

Günter Zöchbauer Over a year ago

Also some way is necessary to make username available. I updated my answer (adding #username="ngForm" or what @yurzui explained in his answer)

Collectives™ on Stack Overflow

how to show validate message in form in angular 2?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related