Angular 2 — формы

Angular 2 — формы

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

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

Angular 2 — формы

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

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

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

Шаг 3 — Создайте компонент формы продукта с именем product-form.component.ts, и добавьте в него следующий код:

Примечание

Мы создаем объект класса Product и добавляем значения в productid и productname.

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

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

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

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

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

Шаг 6 — Поместите в файл app.module.ts приведенный ниже код:

Шаг 7 — Сохраните весь код и запустите приложение с помощью npm. В браузере вы должны увидеть следующий результат.

Angular 2 — формы

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

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

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки:

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

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

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