Angular- How to output Validation dynamically

Question

I want to access classes ng-touched and ng-valid to print error message but couldn't figure out how to. Here's my code-

 <form #individual="ngForm">
    <div class="form-group">
      <label for="name">Name:</label>
      <input type="text" class="form-control" id="name" ngModel name="name" pattern="[a-zA-Z ]*" required placeholder="Enter Your Name">
      <label *ngIf="!individual.control.name.valid">INVALID</label>
    </div>
    <button type="submit" class="btn" (click)="onSave(individual)" [disabled]="!individual.valid">SUBMIT</button>
 </form>

can you share any plunker?

Rohan Fating
– Rohan Fating

2017-09-10 06:07:26 +00:00
Commented Sep 10, 2017 at 6:07 — Rohan Fating
– Rohan Fating, Commented Sep 10, 2017 at 6:07

Vega · Accepted Answer · 2017-09-10 10:28:20Z

1

Add a local variabale on the input which will watch for the model changes, then you can check it's validity:

<input type="text"  #myModel="ngModel"  class="form-control" id="name" ngModel name="name" pattern="[a-zA-Z ]*" required placeholder="Enter Your Name">
<label *ngIf="myModel.invalid">INVALID</label>

or

<label *ngIf="!myModel.valid">INVALID</label>

DEMO

edited Sep 10, 2017 at 10:28

answered Sep 10, 2017 at 6:53

Vega

28.8k28 gold badges121 silver badges151 bronze badges

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

3 Comments

Ayush Singh Over a year ago

One more thing, Can you help me adding transition to the label? I want it to appear with opacity reveal transition

Vega Over a year ago

Yes, sure, but post a separate question please

Ayush Singh Over a year ago

I have posted a question, do have a look :)

Collectives™ on Stack Overflow

Angular- How to output Validation dynamically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related