无法从 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 自己的关于输入验证的指南部分作为基础。

但是，当我输入表单时，警报不会触发，并且我收到多个错误实例，显示为

错误类型错误：“_co.input 未定义”

起初我认为问题可能出在title-edit的连字符上，但是更改为没有连字符或任何特殊字符的名称会导致同样的问题。

注意：我发现了这个看起来很相似的其他 SO 问题，但是他们在打字稿方面定义了一些形式。 由于我的表单只有一个输入和一个按钮，这似乎有点矫枉过正，我想在 .html 文件上设置它。

Answer 1

问题来自您如何访问错误 - !nameForm.form.valid && name-input.errors.minlength 。 语法name-input无效，并且未正确连接到您的输入元素。

---

我怀疑这被解释为name - input.errors.minlength ，因此关于“输入未定义”的错误，但这不是重点。

---

要在绑定（或组件 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>