Учебники

Угловой 2 — Формы

Октябрь 15, 2018

Angular 2 также может создавать формы, которые могут использовать двустороннее связывание с использованием директивы ngModel . Посмотрим, как нам этого добиться.

Шаг 1 — Создайте модель, которая является моделью продуктов. Создайте файл с именем products.ts file.

Products.ts

Шаг 2 — Поместите следующий код в файл. 

export class Product { 
   constructor ( 
      public productid: number, 
      public productname: string 
   ) {  } 
}

Это простой класс, который имеет 2 свойства: 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, который будет отображать компонент.

Создайте объект класса Product и добавьте значения к productid и productname.

Используйте templateUrl, чтобы указать расположение нашего product-form.component.html, который будет отображать компонент.

Шаг 4 — Создайте актуальную форму. Создайте файл с именем product-form.component.html и поместите следующий код. 

<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 используется для привязки объекта продукта к отдельным элементам формы.

Директива ngModel используется для привязки объекта продукта к отдельным элементам формы.

Шаг 5 — Поместите следующий код в файл app.component.ts. 

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: '<product-form></product-form>'
})
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. Зайдите в ваш браузер, вы увидите следующий вывод.

44
Share: