Від автора: існує можливість створювати у другій версії Angular форми, що використовують двосторонню прив’язку через директиву ngModel. Давайте розглянемо, як це реалізується.
Крок 1. Створіть модель, яка являє собою модель товарів. Створіть файл з ім’ям products.ts.
Крок 2 — Помістіть у цей файл наступний код.
export class Product {
constructor (
public productid: number,
public productname: string
) { }
}
Це простий клас, який містить дві властивості, productid і productname.
Крок 3 — Створіть компонент форми продукту з ім’ям product-form.component.ts, і додайте в нього наступний код:
import { Component } from ‘@angular/core’;
import { Product } from ‘./products’;
@Component ({
selector: ‘product-form’,
templateUrl: ‘./product-form.component.html’
})
export class ProductFormComponent {
model = new Product(1,’ProductA’);
}
Примітка
Ми створюємо об’єкт класу Product і додаємо значення в productid і productname.
Ми використовуємо templateUrl для вказівки місця розташування файлу product-form.component.html, який буде відображати компонент.
Крок 4 — Створіть саму форму. Створіть файл з ім’ям product-form.component.html і помістіть в нього наступний код.
div class = “container”>