Angular模板表单验证报错：模板中无法访问last_name.errors.minlength属性

• Angular 中 NgModel 的 errors 属性被定义为 ValidationErrors | null 类型，属于索引签名结构，TypeScript 类型校验规则不允许直接通过点语法访问索引签名下的属性，必须使用方括号语法访问
• 额外注意：当控件校验通过时 errors 的值为 null，如果不先判空直接访问属性还会触发空值报错

直接修改模板中 *ngIf 的判断逻辑即可，修正后的代码如下：

<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>

• ?. 是可选链运算符，会先判断 errors 不为 null/undefined 时才会继续访问后面的属性，避免空值报错
• ['minlength'] 是符合 TypeScript 索引签名访问要求的写法，可绕过点语法的类型校验报错

内容的提问来源于stack exchange，提问作者vaxo0012