ngModel如何以角度访问错误属性？答案

【问题标题】：How ngModel access error property in angular?ngModel如何以角度访问错误属性？
【发布时间】：2020-08-12 14:05:57
【问题描述】：

我有以下角度形式：

<form (ngSubmit)="createStock(stockForm)" #stockForm="ngForm">    
    <div class="stock-name">
      <input type="text"
             placeholder="Stock Name"
             required
             name="stockName"
             #stockName="ngModel"                                   
             [(ngModel)]="stock.name">
    </div>
    <div *ngIf="stockName.errors && stockName.errors.required">     
        Stock Name is Mandatory
    </div>

如您所愿，我正在创建一个模板引用变量 (stockName) 并将 ngModel 分配给它。后来我使用该模板引用变量来检查错误。上面的代码工作正常，但我无法理解为什么在 NgModel 类中不存在名为“错误”的此类属性时它工作正常。

【问题讨论】：

您需要从模板驱动切换到响应式表单才能获取FormGroup 上的错误属性。如何做到这一点超出了本论坛的范围。如果您不想切换，只需编写自己的验证并将其附加到(change) 事件。
以上代码运行良好。但我不明白当 ngmodel 上什至不存在 errors 属性时，我怎么能访问它。

标签： javascript angular ngmodel

【解决方案1】：

我唯一的问题是，当 NgModel 指令中不存在此类错误属性时，为什么 stockName.errors 可以正常工作

NgModel 上有一个 ValidationErrors 类型的 errors 属性，因为 NgModel 继承自 NgControl，而 NgControl 继承自 AbstractControlDirective，并且它具有该属性。

angular API documentation 写得很好，易于浏览。当我不确定某个类型是否有需要使用的受支持成员时，我经常会使用它。

【讨论】：

我想我无法很好地解释我的问题。我发布的代码运行良好。我唯一的问题是，当 NgModel 指令中不存在此类错误属性时，为什么 stockName.errors 正在工作
@Tarun - 好吧，这更有意义。感谢您澄清您的问题。我相应地更新了我的答案并提供了支持文档链接。

【解决方案2】：

我想我找到了问题的答案：
NgModel 扩展了 NgControl 和 NgControl 扩展了 AbstractControlDirective。
AbstractControlDirective 使 NgModel 可以使用错误属性。
当我们尝试访问 ngModel.errors 时，它在内部访问 FormControl 上定义的属性（由 ngmodel 创建）：

this.control.errors

简而言之，ngModel.errors 是一种语法糖。

【讨论】：