validation in angular 2

Viewed 61

I'm making a litte todo app with angular.

in my component.html i want a validation. If you enter nothing in the textbox then i text is show with "title is required". And when you have less then 5 characters in the textbox then also a text is showing.

But that doesn't work ..

When i start my app i see only my textbox without my todo's. When i enter 1 letter in the textbox then i see my todos. Also when i have only 4 characters i see no notification that says i must have 5 characters ..

This is my code :

    <h3>Add todo</h3>
<form >

  <input class="form-control" type="text" id="text" required minlength="5" [(ngModel)]="text" name="text" >
  <div *ngIf="text.errors && (text.dirty || text.touched)" class="alert alert-danger">
    <div [hidden]="!text.errors.required">
      Title is required 
    </div>
    <div [hidden]="!text.errors.minlength">
      titel moet minstens 5 karakters zijn
    </div>
  </div>

</form>
<button class="btn btn-danger" (click)="addTodo()">test</button>
1 Answers
Related