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

1 html validation angular

我希望当 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>
Run Code Online (Sandbox Code Playgroud)

Jua*_*ero 5

我通常以“反应式”方式对带有ReactiveFormModule为您提供的自己的验证器的表单进行验证,所以我不习惯仅验证一个简单的字段作为“#local引用”...

但是,尝试像这样更改您的 *ngIf 代码:

*ngIf="last_name?.errors?.['minlength']"
Run Code Online (Sandbox Code Playgroud)