Angular 2 — формы

Angular 2 — формы

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

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

Angular 2 — формы

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

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

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

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

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

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

Примечание

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

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

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

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

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

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

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

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

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

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

Angular 2 — формы

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

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree