首页 > 解决方案 > 无法从 Angular 6 中的输入验证中获取错误

问题描述

我有一个表单应该检查用户输入的内容是否足够长,如果不是,则添加警报。我将来可能需要检查其他可能的验证错误,但第一个 ( 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,但更改为没有连字符或任何特殊字符的名称会导致同样的问题。

注意:我发现this other SO question看起来很相似,但他们在打字稿方面定义了一些形式。由于我的表单只有一个输入和一个按钮,这似乎有点过头了,我想在 .html 文件中设置它。

标签: angularvalidationforms

解决方案


问题来自您如何访问错误 - !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>

推荐阅读