Angular 2 — формы

Angular 2 — формы

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

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

Angular 2 — формы

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

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

Это простой класс, который содержит два свойства, productid и productname.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

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

Шаг 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">
  <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 следующий код.

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. В браузере вы должны увидеть следующий результат.

Angular 2 — формы

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree