Angular 5 - проверка поля ввода со значением по умолчанию

Question

У меня есть форма с полем ввода со значением по умолчанию. Я хочу добавить проверку для этого поля, чтобы оно содержало ровно 5 символов.

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

Проблема в том, что я не могу получить это значение по умолчанию для проверки, поскольку значение input показывает mi пустую строку "". Если я изменю это значение, то будет видно правильное значение. Есть ли способ использовать валидатор в этом случае?

РЕШЕНИЕ:

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

Answer 1

Вы можете использовать модуль ReactiveForms и просто добавить нужные валидаторы. В вашем случае что-то вроде этого будет работать:

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

Шаблон:

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

Вот рабочий пример.