Как именно работает директива ngModel в этом случае использования?

Question

Я полный новичок с Angular, и у меня есть некоторые концептуальные сомнения относительно директивы NgModel и возможных вариантов ее использования.

Чтение официальной документации Angular: https://angular.io/api/forms/NgModel

Я могу только читать:

Создает экземпляр FormControl из модели предметной области и привязывает его к элементу управления формой.

Мне кажется, что этот FormControl должен быть объектом, содержащим значения, вставленные в поля моей формы, и статус связанных полей (например, для проверки правильности). Это правильно? Теперь у меня есть некоторые сомнения по поводу конкретных вариантов использования.

Итак, давайте рассмотрим пример.

У меня есть такая форма:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">
  <div class="form-group">
    <label for="name">Character Name</label>
    <input
      type="text"
      id="name"
      name="name"
      class="form-control"
      ngModel
      required
      #nameCtrl="ngModel">
    <span class="help-block" *ngIf="nameCtrl.invalid && nameCtrl.touched">Please, enter a name!</span>
  </div>

  <div class="form-group">
    <label for="side">Chose Side</label>
    <select name="side" id="side" class="form-control" ngModel>
      <option *ngFor="let option of availableSides" [value]="option.value">
        {{ option.display }}
      </option>
    </select>
  </div>

  <button class="btn btn-primary" type="submit" [disabled]="form.invalid">Add Character</button>
</form>

1. На моем у меня есть родительский элемент формы: # form = "ngForm" . Что именно указывает? Насколько я понимаю, это просто создание ссылки на всю форму в форму"объект" \ ссылку.

2. Затем у меня есть этот ввод поле внутри моей формы:

Здесь ngModel появляется дважды:

Почему у меня первый ngModel ? Что это означает?

Второй раз появляется # nameCtrl = "ngModel" , который должен просто создать ссылку этого поля ввода на адрес nameCtrl" ".

Answer 1

Директива

NgModel создает экземпляр FormControl из модели предметной области и связывает его с элементом управления формой. Правильно.

Во всех примерах ниже к элементу ввода применяется директива NgModel.

<input name="name" ngModel>

<input name="name" [ngModel]="someValue">

<input name="name" [(ngModel)]="someValue">

Это означает, что для каждого элемента выше Angular будет создан экземпляр класса NgModel .

Внутри этот класс содержит новый экземпляр FormControl

 public readonly control: FormControl = new FormControl(); 

, значение которого обновляется и синхронизируется впоследствии с моделью, элементом ввода и остальной формой, если это необходимо.

Следующее, что вам нужно понять, это ссылочная переменная шаблона (#var)

Эта переменная помогает нам получить ссылку на некоторый экземпляр: HTMLElement или Angular Компонент / Директива / Служба.

Ссылочная переменная шаблона может иметь значение #var="exportAsValue". Это позволяет нам получить ссылку на конкретный экземпляр c, например, мы добавили директивы к элементам и хотим, чтобы наша ссылочная переменная шаблона ссылалась на первую директиву.

Для этого случая нам нужно определить Свойство exportAs в определении декоратора @Directive:

@Directive({
  selector: '[myDir]',
  exportAs: 'myCoolDir'
})
export class MyDir {
  someProp: string;
}

Теперь мы можем получить ссылку на экземпляр MyDir, используя следующий фрагмент:

<div myDir #someRef="myCoolDir">
   {{ someRef.someProp }}

Вернуться к вашему примеру :

• #form="ngForm" содержит ссылку на NgForm class

• #nameCtrl="ngModel" содержит ссылку на NgModel class

Это означает, что вы можете получить доступ к любым свойствам / методам этих классов, например nameCtrl.invalid или form.invalid

См. Также:

• Что здесь за атрибут #auto и зачем он нужен