Перейти к содержанию

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

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
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 можно получить модель или конкретное значение этого поля. Например, далее выводится блок с введенными значениями:

1
2
3
4
5
<div>
    <p>{{phoneTitle.name}} : {{phoneTitle.model}}</p>
    <p>{{phonePrice.name}} : {{phonePrice.model}}</p>
    <p>{{phoneCompany.name}} : {{phoneCompany.model}}</p>
</div>

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

Скриншот проекта

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

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

1
2
3
4
5
6
7
<input
    class="form-control"
    name="title"
    [(ngModel)]="phone.title"
    #phoneTitle="ngModel"
    (change)="onTitleChange()"
/>

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

1
2
3
4
5
onTitleChange(){

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

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

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

1
2
3
4
5
6
7
<input
    class="form-control"
    name="title"
    [(ngModel)]="phone.title"
    #phoneTitle="ngModel"
    (ngModelChange)="onTitleChange()"
/>

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

Комментарии