UPADTED - ANGULAR2 RC4 FORMS

Question

使用angular2 beta Forms。经过大量的搜索后发现没什么用处。希望这里有人帮助我。

基本上我有点困惑如何以正确的方式使用angular2中的表单（即使用ngControl，ngFormControl等）。我在这里创建了一个plnkr

http://plnkr.co/edit/fictP28Vqn74YqrwM1jW?p=preview

这是我的.html代码： -

<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">

  <div class="col-md-7">
Name: <input type="text" id="name" placeholder="Name" class="form-control" ngControl="name">
  </div>
  <div class="col-md-7">
  Password:   <input type="text" id="password" placeholder="password" class="form-control" ngControl="password">
  </div>

  <div class="col-md-7">
    <input type="radio" name='type'>Btech
    <input type="radio" name='type'>Mtech
  </div>

  <div class="col-md-7">
    <input type="checkbox" >Math
    <input type="checkbox">English
    <input type="checkbox">Science
  </div>
  <br>
  <div class="col-md-7">
    <select #selectOption (change)='getValue(selectOption.value)' class='form-control'>
      <option value='1'>One Value</option>
      <option value='2'>two Value</option>
      <option value='3'>Three Value</option>
    </select>
  </div>
</form>
<button type="button" (click)="addNewGroup(CreateGroup.value)" class="btn btn-primary btn-lg"> Create </button>

和.ts代码在这里： -

CreateGroup: FormBuilder;
  constructor(fb: FormBuilder){
    console.log('form called');

    this.CreateGroup = fb.group({
            'name': new Control(),
            'password': new Control()
        })
  }
  addNewGroup(value) {
    console.log(value);
    document.getElementById("myForm").reset();
  }

  getValue(value){
    console.log(value);
  }

我无法理解如何从完整形式获取值作为对象。我的表单包括文本框，复选框，收音机和选择选项。现在这里是我的一些问题。

Q1： - 如何获取radio的值，复选框，使用angular2中的表单选择。（我不想像我在plnkr中使用的那样调用change钩子来选择选项。

Q2： - 与提交数据后的plnkr一样，控制权尚未重置。对形式的控制仍然存在，但形式似乎重置。那么如何重置angular2中窗体的控件。

问题3： - 表格中使用验证的最佳方法是什么（如果有人有plnkr显示验证请发布）。

我在表格上看过这篇文章，但仍然没有成功通过电台复选框和选择选项。

http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2

Answer 1

将表单控件绑定到域模型

在组件中初始化域模型：

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();
}

Demo Plnkr

向表单添加验证器

要添加表单验证，请将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!');
    }
}

Demo Plnkr

显示验证消息

如果要绑定到视图中的验证消息，可以将Control导出为本地模板变量并访问它的验证属性：valid，dirty，pending，pristine和errors对象。

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

Demo Plnkr

如果要创建自己的自定义验证程序，请创建一个方法，该方法返回其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>

Demo Plnkr

绑定到单选按钮列表

在Angular2中，尚未绑定到单选按钮列表的内置支持。查看这篇文章，了解如何执行此操作：

Angular2 - Radio Button Binding

Answer 2

UPADTED - ANGULAR2 RC4 FORMS

TL; DR;

在angular2 RC Form发布后，angular2形式发生了很多变化。其中有一些是主要的突破性变化，其中一些可以忽略不计，这里是使用angular2形式的一些关键点。

基本上有两种方法可以在Angular 2中构建表单，即模板驱动和模型驱动。使用表格的基本结构如下： -

运行npm install @angular/forms --save

为您的应用配置bootstrap方法，如下所示：

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

使用REACTIVE_FORM_DIRECTIVES组件指令来使用表单功能。
创建FormGroup
使用Validators进行验证。

除此之外 FormBuilder 不是构建模型驱动表单所必需的，但它简化了语法。 formbuilder提供了三种基本语法/方法：

组：构建新的表单组。
数组：构建一个新的表单数组。
控制：构建新的表单控件。

这些是在angular2 RC中使用表单的基本步骤。

angular2形式的有用资源：

此处的现场演示

Working Demo for angular2 Forms

Angular2表单：Validations，ngControl，ngModel等

2 个答案:

将表单控件绑定到域模型

向表单添加验证器

显示验证消息

绑定到单选按钮列表

UPADTED - ANGULAR2 RC4 FORMS