Angular2 表单：验证、ngControl、ngModel 等

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:- 如何使用 angular2 中的表单获取单选、复选框、选择的值。 （我不想调用 change 钩子来选择我在 plnkr 中使用的选项）。

Q2:- 如在plnkr 提交数据后表单控件没有被重置。对表单的控制仍然存在，但表单似乎已重置。那么如何在angular2中重置表单的控制。

Q3：- 在表单中使用验证的最佳方法是什么（如果有人有 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

显示验证消息

如果您想绑定到视图中的验证消息，您可以将控件导出为本地模板变量并访问它的验证属性：有效、脏、待处理、原始和错误对象。

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

将验证器组合成一个验证器，并使用内置的Validators.compose 将其传递给Control 构造函数：

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

更新 - 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 不是构建模型驱动表单的强制要求，但它简化了语法。 formbuilder 提供了三种基本语法/方法：

• group：构造一个新的表单组。
• 数组：构造一个新的表单数组。
• 控件：构造一个新的表单控件。

这些是在 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

此处为相同的现场演示

Working Demo for angular2 Forms