我在表单验证中遇到错误。我可以在控制台中访问 errors.minlength，但无法在模板中执行此操作

Question

我想要那个"name太短"；在last_name.errors.minlength为true时可见。但我得到一个错误：属性"minlength"来自索引签名，因此必须使用['minlength']对其进行访问

<div>
<label for="lastname">Last Name</label>
<input required #last_name="ngModel" minlength="4" maxlength="10" type="text" name="lastName" ngModel>
<div [ngClass]="{visible: last_name.touched && last_name.invalid}" class="message">
<div *ngIf="last_name.errors.minlength">name is too short</div>
<div></div>
<div></div>
<div></div>
</div>
</div>

Answer 1

我通常在"反应性"；方式，到一个具有ReactiveFormModule给您的Validator的表单，所以我不习惯只验证一个简单的字段"#本地引用"；。。。

但是，尝试更改你的*ngIf代码如下：

*ngIf="last_name?.errors?.['minlength']"

Answer 2

在项目的配置中，您启用了noPropertyAccessFromIndexSignature规则。它确保，如果某个字段没有在接口中明确定义，那么您就不能通过点语法访问它。

因此，这里您需要做的是使用索引语法：

*ngIf="last_name.errors['minlength']"

或者，作为另一个看起来更干净的选项，您也可以使用hasError方法。代码看起来是这样的：

*ngIf="last_name.hasError('minlength')"

Answer 3

正确语法：

"last_name.errors['minlength']">