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

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

import { Component} from "@angular/core";
import { FormsModule,  NgModel } from "@angular/forms";

class User{
    constructor(public name: string, 
                public age: number, 
                public company: string)
    { }
}
 
@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule], // для работы с формами импортируем FormsModule
    template: `<div> 
                    <p>
                        <label>Имя пользователя</label><br>
                        <input name="name" [(ngModel)]="user.name" #userName="ngModel"/>
                    </p>
                    <p>
                        <label>Возраст</label><br>
                        <input type="number" name="age" [(ngModel)]="user.age" #userAge="ngModel"/>
                    </p>
                    <p>
                        <label>Место работы</label><br>
                        <select name="company" [(ngModel)]="user.company" #userCompany="ngModel">
                        @for(comp of companies; track $index){
                            <option [value]="comp">
                                {{comp}}
                            </option>
                        }
                        </select>
                    </p>
                    <button (click)="logUser(userName, userAge, userCompany)">Логгировать</button>
                </div>
                <div>
                    <p>{{userName.name}} : {{userName.model}}</p>
                    <p>{{userAge.name}} : {{userAge.model}}</p>
                    <p>{{userCompany.name}} : {{userCompany.model}}</p>
                </div>`
})
export class AppComponent { 
 
    user = new User("", 18, "")
     
    users: User[] = [];
    companies: string[] = ["Apple", "Microsoft", "Google", "Jetbrains"];
     
    logUser(name: NgModel, age: NgModel, company: NgModel){
        console.log(name);
        console.log(age);
        console.log(company);
    }
}

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

<div>
	<p>{{userName.name}} : {{userName.model}}</p>
    <p>{{userAge.name}} : {{userAge.model}}</p>
    <p>{{userCompany.name}} : {{userCompany.model}}</p>
</div>

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

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

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

<input name="name" [(ngModel)]="user.name" 
			#userName="ngModel" (change)="onNameChange()" />

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

onNameChange(){
    if(this.user.name=="admin")
        this.user.name = "Undefined";
}

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

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

<input name="name" [(ngModel)]="user.name" 
			#userName="ngModel" (ngModelChange)="onNameChange()" />

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