Получение и изменение модели

Кроме создания привязки директива ngModel позволяет определить объект NgModel, который будет связан с определенным элементом ввода. Например, определим следующий компонент:

import { Component } from '@angular/core'
import { NgModel } from '@angular/forms'

export class Phone {
  constructor(
    public title: string,
    public price: number,
    public company: string
  ) {}
}

@Component({
  selector: 'my-app',
  template: `
    <div class="col-xs-10">
      <div class="form-group">
        <label>Название модели</label>
        <input
          class="form-control"
          name="title"
          [(ngModel)]="phone.title"
          #phoneTitle="ngModel"
        />
      </div>
      <div class="form-group">
        <label>Цена</label>
        <input
          type="number"
          class="form-control"
          name="price"
          [(ngModel)]="phone.price"
          #phonePrice="ngModel"
        />
      </div>
      <div class="form-group">
        <label>ПроизводительŒ</label>
        <select
          class="form-control"
          name="company"
          [(ngModel)]="phone.company"
          #phoneCompany="ngModel"
        >
          <option
            *ngFor="let comp of companies"
            [value]="comp"
          >
            {{ comp }}
          </option>
        </select>
      </div>
      <div class="form-group">
        <button
          class="btn btn-default"
          (click)="
            addPhone(phoneTitle, phonePrice, phoneCompany)
          "
        >
          Добавить
        </button>
      </div>
      <div>
        <p>
          {{ phoneTitle.name }} : {{ phoneTitle.model }}
        </p>
        <p>
          {{ phonePrice.name }} : {{ phonePrice.model }}
        </p>
        <p>
          {{ phoneCompany.name }} : {{ phoneCompany.model }}
        </p>
      </div>
    </div>
  `,
})
export class AppComponent {
  phone: Phone = new Phone('', 0, 'Samsung')
  companies: string[] = [
    'Apple',
    'Huawei',
    'Xiaomi',
    'Samsung',
    'LG',
    'Motorola',
    'Alcatel',
  ]

  addPhone(title: NgModel, price: NgModel, comp: NgModel) {
    console.log(title)
    console.log(price)
    console.log(comp)
  }
}

Здесь для каждого поля определена переменная типа NgModel: #phoneTitle="ngModel" или #phonePrice="ngModel". Каждая из этих переменных представляет модель и ее состояние для соответствующего поля ввода. Используя свойства объекта NgModel, мы можем получить данные о состоянии модели. В частности, с помощью свойства name мы можем получить название поля ввода (значение атрибута name), к которому привязана переменная. А с помощью свойств model и viewModel можно получить модель или конкретное значение этого поля. Например, далее выводится блок с введенными значениями:

<div>
  <p>{{phoneTitle.name}} : {{phoneTitle.model}}</p>
  <p>{{phonePrice.name}} : {{phonePrice.model}}</p>
  <p>{{phoneCompany.name}} : {{phoneCompany.model}}</p>
</div>

Ну и также мы можем передавать подобные переменные в обработчики событий и обрабатывать в коде компонента. Как в данном случае, данные переменные выводятся на консоль.

Обработка изменения модели

Иногда возникает необходимость проконтролировать изменение модели. Для этого в Angular мы можем обрабатывать встроенные события, в частности, событие change. Например, изменим поле ввода для модели телефона:

<input
  class="form-control"
  name="title"
  [(ngModel)]="phone.title"
  #phoneTitle="ngModel"
  (change)="onTitleChange()"
/>

При срабатывании события change будет вызываться метод onTitleChange(). Теперь определим данный метод в классе компонента:

onTitleChange(){

    if(this.phone.title=="нет")
        this.phone.title = "неизвестно";
}

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

Обработка данного события имеет один минус — событие срабатывает только тогда, когда мы покинем данное поле ввода. Если же нам надо динамически при вводе каждого нового символа обрабатывать ввод, то в этом случае более удобным решением будет обработка события ngModelChange. Это событие не соотносится ни с каким стандартным событием элемента html. Функциональность ngModelChange привносится в элемент через применение к нему директивы NgModel. Например:

<input
  class="form-control"
  name="title"
  [(ngModel)]="phone.title"
  #phoneTitle="ngModel"
  (ngModelChange)="onTitleChange()"
/>

Код метода onTitleChange() остается тем же, что и выше.

Комментарии