Получение модели формы в Angular

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

Давайте изменим нашу форму, созданную в предыдущем уроке. Сделаем так, чтобы данные из инпутов записывались не в массив, а определялись из заданной моделью формы.

Зайдем в наш главный компонент и импортируем в него директиву NgModel:

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

Далее вместо массива продуктов, мы создадим объект класса Product с изначально пустыми значениями. В функции addProduct в параметрах зададим свойства нашего продукта, привязанные к нашей модели NgModel. А в консоль выведем их весь объект нашей модели:

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);
	}
}

Теперь зададим разметку в нашем HTML-шаблоне. К каждому полю ввода зададим соответствующую шаблонную переменную, которая значение примет модель каждого шаблона:

<div>
	<div class="form-group">
		<label>Title</label>
		<input class="form-control" name="title"
		[(ngModel)]="product.title" #productTitle="ngModel" />
	</div>
	<div class="form-group">
		<label>Cost</label>
		<input type="number" class="form-control" name="price"
		[(ngModel)]="product.price" #productPrice="ngModel" />
	</div>
	<div class="form-group">
		<label>Product Type</label>
		<select class="form-control" name="prodType"
		[(ngModel)]="product.prodType" #productProdType="ngModel">
			<option  *ngFor="let prodType of prodTypes" [value]="prodType">
				{{ prodType }}
			</option>
		</select>
	</div>
	<div class="form-group">
		<button (click)="addProduct(productTitle, productPrice, productProdType)">Add Product</button>
	</div>
</div>
<div>
	<h3>Added product</h3>
		<p>{{productTitle.name}} : {{productTitle.model}}</p>
		<p>{{productPrice.name}} : {{productPrice.model}}</p>
		<p>{{productProdType.name}} : {{productProdType.model}}</p>
</div>

Открыв наш проект в браузере вы увидите форму. Когда мы добавим новый продукт в нее, то он отобразится внизу страницы. А модель каждого параметра можно увидеть в консоли отладчика браузера.