Начало работы с формами в 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>

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