Angular 5 - Validate input field with default value

Question

I have form with input field with default value. I want to add validation for that field to have exactly 5 characters.

<td>
    <input type="text" maxlength="5" ngModel 
    #number="ngModel" name="number" value="{{data.number}}" class="form-control">
</td>

The problem is that I cannot get that default value in order to validate as the value of input shows mi empty string "". If I change that value the proper value is visible. Is there a way to use validator in this case ?

SOLUTION:

    <td>
    <input type="text" maxlength="5" [(ngModel)]="data.number" 
    #number name="number" class="form-control">
</td>

But on start (when I have default value) my value from input is equals "". So I will have error — user852
– user852, Commented Jul 5, 2018 at 8:00

korteee · Accepted Answer · 2018-07-05 09:11:30Z

1

You can make use of ReactiveForms module and simply add the desired validators. In your case something like this would work:

this.myForm = this.formBuilder.group({
      myInput: new FormControl('defaultValue',[Validators.minLength(5),Validators.maxLength(5)])
})

Template:

<form name="myForm" [formGroup]="myForm">
    <label>
    <div>My input</div>
    <input type="text" formControlName="myInput" [ngClass]="{'error': myForm.invalid}">
  </label>
</form>

Here's a working example.

answered Jul 5, 2018 at 9:11

korteee

2,7122 gold badges21 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Angular 5 - Validate input field with default value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related