# Обработка изменения модели формы в Angular

Если нам нужно отследить все изменения, внесенные в модель, мы можем подключить в нее обработчик события `ngModelChange`. Данный обработчик применяется к элементу с помощью директивы `NgModel`.

Давайте зайдем в наш главный компонент и добавим в класс `AppComponent` функцию `onTitleChange`, которая будет отображать изменения в имени продукта и выводить их в консоль. Теперь запишем ей одно условие, если вместо имени поставлено значение `'no'`, то в консоль выведется сообщение о том, что у продукта нет имени:

`export class AppComponent { title: string = ''; price: number = 0; prodType: string = ''; product: Product = new Product('', 0, ''); prodTypes: string[] = ['fruits', 'vegetables', 'dairy']; addProduct(title: NgModel, price: NgModel, prodType: NgModel) { console.log(title); console.log(price); console.log(prodType); } onTitleChange(){ if (this.product.title == 'no') { console.log('this product has not name'); } } }`

Теперь в поле ввода имени продукта добавим следующую запись:

`<div> <div class="form-group"> <label>Title</label> <input class="form-control" name="title" [(ngModel)]="product.title" #productTitle="ngModel" (ngModelChange)="onTitleChange()" /> </div>`

В результате, при вводе значения `'no'` в инпут имени продукта, в консоли браузера мы увидим сообщение `'this product has not name'`.

На основе теории урока, реализуйте в своем проекте модель, отражающую изменения стоимости продукта.

↑