Angular 2 — формы

Angular 2 — формы

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

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

Angular 2 — формы

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

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

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

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

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

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

Примечание

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

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

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

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

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

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

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

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

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

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

Angular 2 — формы

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

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

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

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

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

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

Овладейте азами работы с Angular 4

Смотреть

Метки:

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

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

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

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