# Начало работы с формами в Angular

Для работы с формами отправки данных в Angular вначале нужно импортировать специальный модуль `FormsModule`:

`import { Component} from '@angular/core'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; @NgModule({ imports: [BrowserModule, FormsModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }`

Также стоит проверить, есть ли поле `'angular/forms'` в файле `package.json`:

`{ "name": "test", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { ... "@angular/forms": "^16.2.0", ... } }`

Далее мы будем работать с формами с помощью директивы `NgModel`. Директива создает на основе объекта `FormControl` модель взаимодействия с нужным элементом формы. Также она принимает параметром переданную ей модель. При этом можно использовать однонаправленную и и двунаправленную привязки.

Если мы хотим просто вывести значение модели в поле ввода, то можно использовать однонаправленную привязку:

`<input name="title" [ngModel]="title" />`

Такая привязка свойства в качестве модели использует свойство `title`, заданное в классе главного компонента.

В случае, когда мы хотим отследить изменение введенных данных, то нам следует применить двунаправленную привязку:

`<input name="title" [(ngModel)]="title" />`

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

Для начала в главном компоненте нашего проекта сделаем и экспортируем класс `Product`:

`import { Component, ViewChild, ElementRef } from '@angular/core'; export class Product { constructor(public title: string, public price: number, public prodType: string) { } }`

Теперь в классе `AppComponent` пропишем свойства каждого продукта - `title`, `price`, `prodType`. Также зададим свойство `products`, определяющее массив продуктов, и свойство `prodTypes` - для массива типов продуктов. Также реализуем функцию, добавляющую новый продукт в соответствующий массив:

`@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title: string = ''; price: number = 0; prodType: string = ''; products: Product[] = []; prodTypes: string[] = ['fruits', 'vegetables', 'dairy']; addProduct(){ this.products.push(new Product(this.title, this.price, this.prodType)); } }`

Переходим в HTML-шаблон и прописываем нашу форму. В инпуты с именами `title` и `price` мы будем просто вводить любые значения. В выпадающем списке `prodType` мы выберем одно из значений массива `prodTypes` с помощью цикла `ngFor`. При нажатии на кнопку мы отправим все введенные и выбранные данные в массив главного компонента. А внизу также с помощью цикла `ngFor` выведем каждый добавленный продукт как пункт маркированного списка:

`<div> <div class="form-group"> <label>Title</label> <input class="form-control" name="title" [(ngModel)]="title" /> </div> <div class="form-group"> <label>Cost</label> <input type="number" class="form-control" name="price" [(ngModel)]="price" /> </div> <div class="form-group"> <label>Product Type</label> <select class="form-control" name="prodType" [(ngModel)]="prodType"> <option *ngFor="let prodType of prodTypes" [value]="prodType"> {{prodType}} </option> </select> </div> <div class="form-group"> <button (click)="addProduct()">Add Product</button> </div> </div> <div><h3>Added products</h3> <ul> <li *ngFor="let prod of products">{{prod.title}} ({{prod.prodType}}) - {{prod.price}}</li> </ul> </div>`

Повторите в своем проекте пример, приведенный в уроке.

↑