I am working on creating an angular2 form in typescript using ionic ,
.html
<form (ngSubmit)="validateData(form)" #form="ngForm">
<ion-input type="text" name="data" #number="ngModel" maxlength='4" [(ngModel)]="digits"></ion-input>
<span *ngIf="number.dirty && form.submitted && form.value.number<4">Enter all numbers</span>
<span *ngIf="number.pristine && form.submitted">Enter number</span>
<button (click)="restart()">Restart</button>
<button type="submit">Validate</button>
</form>
Issue1: When I click on Restart button, the error message is displayed as "Enter number", which I do not want to display. Also, it triggers the validateData() function.
Update: Issue2: My requirement is that only numbers should be allowed in the text box and not alphabets or special characters such as 'a', 'b' , '@'. With the current implementation, the input box accepts a b c d along with @ # $ and 1 2 3. I want to restrict it to numbers only. Changing the attribute to type="number" achieved the goal, but the input field is accepting more than 4 characters, which is my maxlength limit.