Привязка элементов управления формы к модели предметной области

Инициализируйте модель предметной области в вашем компоненте:

constructor(){
  this.student = new Student();
}

Используйте ngModel для привязки элементов управления формы к модели предметной области с двусторонней привязкой модели.

Name: <input [(ngModel)]="student.name" type="text">
Password:  <input [(ngModel)]="student.password" type="text">

Когда кнопка нажата, передайте модель предметной области в качестве аргумента:

<button type="button" (click)="addNewGroup(student)">Create</button>

Реализуйте метод addNewGroup. Чтобы сбросить форму, обновите модель предметной области новой моделью:

addNewGroup(student:Student) {
  alert('added ' + student.name);
  this.student = new Student();
}

Демонстрационный план

Добавление валидаторов в форму

Чтобы добавить проверку формы, добавьте ngFormModel к элементу формы и добавьте декораторы ngControl к каждому элементу ввода (ngControl — синтаксический сахар для [ngFormControl]="studentForm.controls['name']"):

<form [ngFormModel]="studentForm" />
   <input type="text" ngControl="name" />
   <input type="text" ngControl="password" />
</form>

ngFormModel сопоставляется со свойством ControlGroup вашего компонента. Инициализируйте ControlGroup с помощью объекта конфигурации, имена свойств которого соответствуют значениям атрибутов ngControl:

constructor(fb: FormBuilder){
  this.student = new Student();
  this.studentForm = fb.group({
     'name': new Control(this.student.name, Validators.required),
     'password': new Control(this.student.password, Validators.required)
  });
}

В приведенном выше примере встроенный валидатор required используется для указания того, что имя и пароль являются обязательными полями. Затем вы можете проверить, действительна ли вся форма, используя свойство valid в модели формы:

addNewGroup(student:Student) {
    if (this.studentForm.valid) {
      alert('added ' + student.name);
      this.student = new Student();
    }
    else {
      alert('form is not valid!');
    }
}

Демонстрационный план

Отображение сообщений проверки

Если вы хотите привязаться к сообщениям проверки в представлении, вы можете экспортировать элемент управления как локальную переменную шаблона и получить доступ к его свойствам проверки: действительный, грязный, ожидающий, нетронутый и объект ошибок.

 <input ngControl="name" #name="ngForm" type="text">
 <span [hidden]="name.valid"><b>Required</b></span>

Демонстрационный план

Если вы хотите создать свой собственный валидатор, создайте метод, возвращающий объект проверки, чьи свойства boolean соответствуют ошибкам проверки. Например, вы можете создать валидатор, который гарантирует, что первая буква пароля должна быть числовой:

interface ValidationResult {
 [key:string]:boolean;
}
class PasswordValidator {
 static startsWithNumber(control: Control): ValidationResult { 
   if ( control.value && control.value.length > 0){
     if (isNaN(control.value[0]))
      return { 'startsWithNumber': true };
   }

   return null;
 } 
}

Собираем валидаторы вместе в один валидатор и передаем его конструктору Control с помощью встроенного Validators.compose:

this.studentForm = fb.group({
   'name': new Control(this.student.name, Validators.required),
   'password': new Control(this.student.password, Validators.compose([Validators.required,PasswordValidator.startsWithNumber])),
});

Если у вас есть несколько валидаторов на одном и том же Control, используйте объект errors, чтобы различать их:

<input ngControl="password" #password="ngForm" />
<span [hidden]="!password.control.hasError('required')"><b>Required</b></span>
<span [hidden]="!password.control.hasError('startsWithNumber')"><b>Must start with number</b></span>

Демонстрационный план

Привязка к спискам радиокнопок

В Angular2 еще нет встроенной поддержки для привязки к спискам переключателей. Проверьте этот пост, чтобы узнать, как это сделать:

Angular2 — привязка переключателя

ОБНОВЛЕНО - ФОРМЫ ANGULAR2 RC4

TL;DR;

После выпуска angular2 RC Forms в формы angular2 было внесено много изменений. некоторые из них являются серьезными критическими изменениями, некоторые из них незначительны, вот некоторые ключевые моменты для использования форм angular2.

По сути, есть два способа создания форм в Angular 2, а именно на основе шаблона и на основе модели. Базовая структура использования форм следующая:

• беги npm install @angular/forms --save

• настройте метод начальной загрузки для вашего приложения следующим образом:

  bootstrap(AppComponent, [
    disableDeprecatedForms(), // disable deprecated forms
    provideForms(), // enable new forms module
  ]);
  

• используйте REACTIVE_FORM_DIRECTIVES для директив компонентов, чтобы использовать функциональные возможности форм.

• создать переменную формы типа FormGroup
• Используйте Validators для проверки.

кроме того, FormBuilder не является обязательным для создания форм, управляемых моделью, но упрощает синтаксис. существует три основных синтаксиса/метода, предоставляемых конструктором форм:

• группа: создайте новую группу форм.
• массив: создание нового массива форм.
• элемент управления: создайте новый элемент управления формой.

Это основные шаги по использованию форм в angular2 RC.

Полезные ресурсы для форм angular2:

• https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol

• https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

Живая демонстрация того же здесь

Рабочая демонстрация форм angular2