Angular 2 — форми

599

Від автора: існує можливість створювати у другій версії Angular форми, що використовують двосторонню прив’язку через директиву ngModel. Давайте розглянемо, як це реалізується.

Крок 1. Створіть модель, яка являє собою модель товарів. Створіть файл з ім’ям products.ts.

Angular 2 — форми

Крок 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”>

Product Form

ID
Name

Примітка: директива NgModel використовується, щоб зв’язати об’єкт товару з конткретным елементом форми.

Крок 5 — Помістіть файл в app.component.ts наступний код.

import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template:”
})
export class AppComponent { }

Крок 6 — Помістіть файл в app.module.ts наведений нижче код:

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
import { FormsModule } from ‘@angular/forms’;
import { ProductFormComponent } from ‘./product-form.component’;
@NgModule ({
imports: [ BrowserModule,FormsModule],
declarations: [ AppComponent,ProductFormComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Крок 7 — Збережіть весь код і запустіть додаток з допомогою npm. У браузері ви повинні побачити наступний результат.

Angular 2 — форми