Angular 在表单控件的错误对象上访问未知 属性 时不会抛出错误

Question

定义一个 angular 响应式表单，其中包含一组不同的表单控件和为一些控件定义的验证器。在.ts文件中定义一个getter属性如下图。

  get formControls(): {[key: string]: AbstractControl} {
    return this.testForm.controls;
  }

在html中，定义一个<mat-error>和一个*ngIf，如下所示

      <mat-form-field appearance="fill">
        <mat-label>First Name</mat-label>
        <input matInput placeholder="Item Name" formControlName="firstName">
        <mat-error *ngIf="formControls.firstName.errors?.maxLength">First Name cannot exceed 25 characters</mat-error>
      </mat-form-field>

maxLength 属性 不正确，不存在于表单控件的错误对象中。正确的 属性 是 maxlength。为什么在使用不正确的 属性 时 angular 不会抛出错误？

花了很长时间才确定 属性 名称是错误的，这就是 mat-error 中定义的消息没有显示在 html 中的原因。

这是 Angular 的错误还是我遗漏或实施不正确？

感谢大家花时间回答这个问题。

Answer 1

这就是 JavaScript 的工作原理。如果一个对象没有键，它会在尝试访问它时 return undefined 而不会像其他语言那样抛出异常。 undefined 是假的，所以 !!undefined 的计算结果是假的。

const obj = {a: 10};
console.log(obj.b) // undefined

在您的示例中，formControls.firstName.errors?.maxLength 未定义，因为错误没有名为 maxLength 的 属性。