Angular2表单:Validations,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中使用的select选项调用hook).

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

演示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!');
    }
}

演示Plnkr

显示验证消息

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

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

演示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>

演示Plnkr

绑定到单选按钮列表

在Angular2中,尚未绑定到单选按钮列表的内置支持.查看此帖子以了解如何执行此操作:

Angular2 - 单选按钮绑定