Создание формы в Angular через Template Driven подход

В данном уроке будем изучать создание формы в Angular фреймворке.У нас уже есть подготовленная форма которую можно скачать по этой ссылке и выглядит она вот так:

Форма в фреймворке Angular

В рамках данного урока будем инициализировать форму при помощи фреймворка Angular и будем валидировать её двумя способами:

  1. Через шаблон (Template Driven)
    То есть вся логика по валидация форм будет написана в шаблоне.
  2. Реактивный подход
    Он позволяет обрабатывать всю форму не меняя html, а через написание кода внутри компонента.

Рассмотрим обе возможности.

TD – Создаём форму

и html формы

Это скелет на чём будем дальше писать код. Начнём!

Для того чтобы указать Angular что наш <input> является элементом формы (он должен за ним следить) то мы должны прописать ему специальную директиву ngModel:

Теперь зададим название данному полю:

теперь сделаем то же самое для пароля:

и для select и радио кнопок так-же:

Обработчик формы

Чтобы обработать событие отправки формы, мы должны указать специальный метод к тэгу <form>

Теперь давайте создадим функцию submitForm.

Теперь при событий submit получим объект формы:

Объект формы в Angular 5

Обязательно!
Чтобы у Вас всё работало в app.module.ts должен быть подключен FormsModule:

Это всё, Мы получили объект формы и можем с ним работать дальше, файлы с кодом из урока есть тут.

Рекомендую для изучения Angular

Просмотры: 612
(2 оценок, среднее: 5,00 из 5)
Загрузка...

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

You have to agree to the comment policy.