От автора: существует возможность создавать во второй версии Angular формы, использующие двустороннюю привязку через директиву ngModel. Давайте рассмотрим, как это реализуется.
Шаг 1. Создайте модель, которая представляет собой модель товаров. Создайте файл с именем products.ts.
Шаг 2 — Поместите в этот файл следующий код.
|
1 2 3 4 5 6 |
export class Product { constructor ( public productid: number, public productname: string ) { } } |
Это простой класс, который содержит два свойства, productid и productname.
Шаг 3 — Создайте компонент формы продукта с именем product-form.component.ts, и добавьте в него следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 |
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 и поместите в него следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
div class = "container"> <h1>Product Form</h1> <form> <div class = "form-group"> <label for = "productid">ID</label> <input type = "text" class = "form-control" id = "productid" required [(ngModel)] = "model.productid" name = "id"> </div> <div class = "form-group"> <label for = "name">Name</label> <input type = "text" class = "form-control" id = "name" [(ngModel)] = "model.productname" name = "name"> </div> </form> </div> |
Примечание: директива NgModel используется, чтобы связать объект товара с конткретным элементом формы.
Шаг 5 — Поместите в файл app.component.ts следующий код.
|
1 2 3 4 5 6 7 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: '<product-form></product-form>' }) export class AppComponent { } |
Шаг 6 — Поместите в файл app.module.ts приведенный ниже код:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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. В браузере вы должны увидеть следующий результат.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
