Как ngModel получить доступ к свойству ошибки в angular?

Question

У меня есть следующая форма в angular:

<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 нет такого свойства, как «ошибки».

Answer 1

Мой единственный вопрос: почему stockName.errors работает, когда в директиве NgModel нет такого свойства ошибок

Существует свойство errors типа ValidationErrors на NgModel как NgModel наследуется от NgControl, который наследуется от AbstractControlDirective, и это имеет это свойство.

Документация API angular очень хорошо написана и легко ориентируется в ней. Я часто использую ее, когда не уверен, что тип поддерживает член, который мне нужно использовать.

Answer 2

Я думаю, что нашел ответ на свой вопрос:
NgModel расширяет NgControl и NgControl расширяет AbstractControlDirective .
AbstractControlDirective делает свойство ошибок доступным для NgModel.
Когда мы пытаемся получить доступ к ngModel.errors, он внутренне обращается к свойству, определенному в FormControl (созданному ngmodel) как:

this.control.errors 

Короче говоря, ngModel.errors представляет собой синтаксис c sugar.