angular - 无法从 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 文件中设置它。
解决方案
问题来自您如何访问错误 - !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>
推荐阅读
- r - 需要根据另一列将列中的na替换为averageif
- c# - 无法使用 SFTP/SSH.NET 从远程目录中删除文件?
- r - R simmer 简单的矿山模拟
- ruby-on-rails - rails active record 从继承的表中查找记录
- lua - (Corona SDK)场景转换不播放
- plsql - 如何在与另一个不同的架构中调用不同包中的过程
- docker - 跑码头出口
- perl - 如何从特定行收集字符串
- python - 将元素插入列表/索引的最后位置时出现问题?
- typescript - 读取walk /protos中的第一个路径时出错错误:ENOENT:没有这样的文件或目录,带有Firestore和Typescript lambda的lstat'/protos'