Не удается получить ошибки при проверке ввода в Angular 6

Question

У меня есть форма, которая должна проверить, достаточно ли длинна введенная пользователем информация, а затем добавить предупреждение, если это не так. Есть и другие возможные ошибки проверки, которые мне, возможно, придется проверить в будущем, но первая (minlength) не работает.

Код для формы следующий:

      <form *ngIf="editingName" #nameForm="ngForm" (ngSubmit)="saveName()">

        <input name="name-input" *ngIf="editingName" class="name-edit" required minlength="3" maxlength="30"  
               [(ngModel)]="editedName" placeholder="{{editedName}}" (change)="updateForm()">

        <button [disabled]="!nameForm.form.valid" type="submit" class="btn btn-primary" >Save Name</button>

        <div *ngIf="!nameForm.form.valid && name-input.errors.minlength" class="alert">
          Name must have at least 3 letters!
        </div>

      </form>

Я использовал собственный справочник Angular о проверке ввода в качестве базы.

Тем не менее, когда я набираю форму, предупреждение не срабатывает, и я получаю несколько экземпляров ошибки, которая говорит

ОШИБКА TypeError: "_co.input не определен"

Сначала я подумал, что проблема может быть с дефисом в title-edit, но изменение имени без дефиса или каких-либо специальных символов привело к той же проблеме.

Примечание: я нашел этот другой SO вопрос , который кажется похожим, но они определяют некоторые из их формы на стороне машинописного текста. Поскольку в моей форме есть только один вход и кнопка, это кажется излишним, и я хочу настроить его для файла .html.

Answer 1

Проблема связана с тем, как вы получаете доступ к ошибкам - !nameForm.form.valid && name-input.errors.minlength. Синтаксис name-input недопустим и неправильно связан с вашим элементом ввода.

---

Я подозреваю, что это интерпретируется как name - input.errors.minlength, следовательно, ошибка "input is undefined", но это не относится к делу.

---

Чтобы сослаться на это поле в привязке (или компоненте TypeScript), необходимо указать Angular хранить его в переменной - так же, как вы делаете с nameForm.

<form *ngIf="editingName" #nameForm="ngForm" (ngSubmit)="saveName()">
    <input #nameInput="ngModel" name="name-input" *ngIf="editingName" class="name-edit" required minlength="3" maxlength="30"  
           [(ngModel)]="editedName" placeholder="{{editedName}}" (change)="updateForm()">

    <button [disabled]="!nameForm.form.valid" type="submit" class="btn btn-primary" >Save Name</button>

    <div *ngIf="!nameForm.form.valid && nameInput.errors.minlength" class="alert">
      Name must have at least 3 letters!
    </div>
</form>