Обработка изменения модели формы в 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'.

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