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

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

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

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  answers = [{
    type: 'yes',
    text: 'Да'
  }, {
    type: 'no',
    text: 'Нет'
  }];
  // объект answers будем использовать для радио кнопок
}

и html формы

<div class="col-xs-8 col-xs-offset-2">
  <form>
    <div class="form-group">
      <label>Email</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group">
      <label>Пароль</label>
      <input type="password" class="form-control">
    </div>
    <div class="form-group">
      <label>Выберите страну</label>
      <select class="form-control">
        <option >
Это скелет на чём будем дальше писать код. Начнём!

Для того чтобы указать Angular что наш <input> является элементом формы (он должен за ним следить) то мы должны прописать ему специальную директиву ngModel:
<div class="form-group">
    <label>Email</label>
    <input
        type="text"
        class="form-control"
        ngModel
    >
</div>
 
Теперь зададим название данному полю:
 
<input
    type="text"
    class="form-control"
    ngModel
    name="email"
>
 
теперь сделаем то же самое для пароля:
 
<input
    type="password"
    class="form-control"
    ngModel
    name="pass"
>
 
и для select и радио кнопок так-же:
 
<select class="form-control" ngModel name="country">
    <option >
<input
    type="radio"
    [value]="ans.type"
    ngModel
    name="answer"
>
 
Обработчик формы
 
Чтобы обработать событие отправки формы, мы должны указать специальный метод к тэгу <form>
 
<form #form="ngForm" (ngSubmit)="this.submitForm(form)">
<!-- #form это локальная референция на форму -->
 
Теперь давайте создадим функцию submitForm.
 
submitForm(form: NgForm) {
   //интерфейс NgForm нужно импортировать из @angular/forms
   console.log('Submited!', form);
}
 
Теперь при событий submit получим объект формы:
 
 
Обязательно!
Чтобы у Вас всё работало в app.module.ts должен быть подключен FormsModule:
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 
Это всё, Мы получили объект формы и можем с ним работать дальше, файлы с кодом из урока есть тут.
 
Рекомендую для изучения Angular
 

• Курс Angular 4 с Нуля до Профи от издательство WebForMySelf.