# Получение модели формы в 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>`

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

↑