Angular 2 — формы

Дата публикации: 2017-11-15

Angular 2 — формы

От автора: существует возможность создавать во второй версии Angular формы, использующие двустороннюю привязку через директиву ngModel. Давайте рассмотрим, как это реализуется.

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

Angular 2 — формы

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

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

Узнать подробнее

До 10 проектов в портфолио для старта карьеры

Подходит для новичков без опыта в программировании

Практика на вебинарах с разработчиками из крупных компаний

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

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');
}

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">
  <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>

div class = "container">

<h1>Product Form</h1>

<form>

<input type = "text" class = "form-control" id = "productid" required

[(ngModel)] = "model.productid" name = "id">

</div>

<input type = "text" class = "form-control" id = "name"

[(ngModel)] = "model.productname" name = "name">

</div>

</form>

</div>

Примечание: директива NgModel используется, чтобы связать объект товара с конткретным элементом формы.

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

import { Component } from '@angular/core';
 
@Component ({
  selector: 'my-app',
  template: '<product-form></product-form>'
})
export class AppComponent { }

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 { }

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 — формы

Источник: //www.tutorialspoint.com/

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

Узнать подробнее

До 10 проектов в портфолио для старта карьеры

Подходит для новичков без опыта в программировании

Практика на вебинарах с разработчиками из крупных компаний

Редакция: Команда webformyself.

Метки: Angular

Angular 2 — формы

Похожие статьи:

Комментарии Вконтакте:

Материалы

Мы в соц. сетях

Связь

Информация