angular2-响应式表单

响应式表单是同步的。模板驱动表单是异步的。这个不一样点很重要

使用响应式表单，咱们会在代码中建立整个表单控件树。 咱们能够当即更新一个值或者深刻到表单中的任意节点，由于全部的控件都始终是可用的。

模板驱动表单会委托指令来建立它们的表单控件。 为了消除“检查完后又变化了”的错误，这些指令须要消耗一个以上的变动检测周期来构建整个控件树。 这意味着在从组件类中操纵任何控件以前，咱们都必须先等待一个节拍。

好比，若是咱们用  @ViewChild(NgForm) 查询来注入表单控件，并在 生命周期钩子  ngAfterViewInit  中检查它，就会发现它没有子控件。 咱们必须使用  setTimeout 等待一个节拍才能从控件中提取值、测试有效性，或把它设置为新值。

 

导入ReactiveFormsModule

 

基础的表单类

• AbstractControl是三个具体表单类的抽象基类。 并为它们提供了一些共同的行为和属性，其中有些是可观察对象（Observable）。

• FormControl 用于跟踪一个单独的表单控件的值和有效性状态。它对应于一个HTML表单控件，好比输入框和下拉框。

• FormGroup用于 跟踪一组AbstractControl的实例的值和有效性状态。 该组的属性中包含了它的子控件。 组件中的顶级表单就是一个FormGroup。

• FormArray用于跟踪AbstractControl实例组成的有序数组的值和有效性状态。

 

添加FormGroup

多个FormControl，咱们会但愿把它们注册进一个父FormGroup中。这很容易。只要把它加入hero-detail.component.ts的import区就能够了

export class HeroDetailComponent2 {
  heroForm = new FormGroup ({
    name: new FormControl()
  });
}

　　

<form [formGroup]="heroForm" novalidate>
  <div class="form-group">
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>
</form>

<form>元素上的novalidate属性会阻止浏览器使用原生HTML中的表单验证器。

formGroup是一个响应式表单的指令，它拿到一个现有FormGroup实例，并把它关联到一个HTML元素上。 这种状况下，它关联到的是form元素上的FormGroup实例heroForm

　　heroForm.value   ==>  { name : xxxx, ....... }

 

FormBuilder: 

FormBuilder类能经过处理控件建立的细节问题来帮咱们减小重复劳动。

import { FormBuilder, FormGroup } from '@angular/forms';

export class HeroDetailComponent3 {
  heroForm: FormGroup; // <--- heroForm is of type FormGroup
  constructor(private fb: FormBuilder) { // <--- inject FormBuilder
    this.createForm();
  }
  createForm() {
    this.heroForm = this.fb.group({
      name: '', // <--- the FormControl called "name"
    });
  }
}

FormBuilder.group是一个用来建立FormGroup的工厂方法，它接受一个对象，对象的键和值分别是FormControl的名字和它的定义。 在这个例子中，name控件的初始值是空字符串。

 

要想让name这个FormControl是必须的，请把FormGroup中的name属性改成一个数组。第一个条目是name的初始值，第二个是required验证器：Validators.required

this.heroForm = this.fb.group({
  name: ['', Validators.required ],
});

　　

多级FormGroup

export class HeroDetailComponent5 {
  heroForm: FormGroup;
  states = states;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.heroForm = this.fb.group({ // <-- the parent FormGroup
      name: ['', Validators.required ],
      address: this.fb.group({ // <-- the child FormGroup
        street: '',
        city: '',
        state: '',
        zip: ''
      }),
      power: '',
      sidekick: ''
    });
  }
}

<div formGroupName="address" class="well well-lg">
  <input class="form-control" formControlName="street">
  <input class="form-control" formControlName="city">
  <select class="form-control" formControlName="state">
  <input class="form-control" formControlName="zip">
</div>

作完这些以后，浏览器中的JSON输出就变成了带有多级FormGroup的住址。

 

查看FormControl的属性

 

使用.get()方法来提取表单中一个单独FormControl的状态

<p>Name value: {{ heroForm.get('name').value }}</p>

 

要点取得FormGroup中的FormControl的状态，使用点语法来指定到控件的路径

<p>Street value: {{ heroForm.get('address.street').value}}</p>

 

使用此技术来显示FromControl的任意属性，代码以下

属性	说明
myControl.value	FormControl的值。
myControl.status	FormControl的有效性。可能的值有VALID、INVALID、PENDING或DISABLED。
myControl.pristine	若是用户还没有改变过这个控件的值，则为true。它老是与myControl.dirty相反。
myControl.untouched	true 若是用户还没有进入这个HTML控件，也没有触发过它的blur（失去焦点）事件，则为true。 它是myControl.touched的反义词。

 

数据模型与表单模型

自服务器的 hero 就是数据模型，而FormControl的结构就是表单模型

组件必须把数据模型中的英雄值复制到表单模型中。这里隐含着两个很是重要的点。

1. 1. 开发人员必须理解数据模型是如何映射到表单模型中的属性的。

   2. 用户修改时的数据流是从DOM元素流向表单模型的，而不是数据模型。表单控件永远不会修改数据模型。

// 数据模型
export class Hero {
  id = 0;
  name = '';
  addresses: Address[];
}

export class Address {
  street = '';
  city   = '';
  state  = '';
  zip    = '';
}

//表单模型
this.heroForm = this.fb.group({
  name: ['', Validators.required ],
  address: this.fb.group(new Address()),
  power: '',
  sidekick: ''
});

 

在这些模型中有两点显著的差别：

1. 1. Hero有一个id。表单模型中则没有，由于咱们一般不会把主键展现给用户。

   2. Hero有一个住址数组。这个表单模型只表示了一个住址，稍后的修改则能够表示多个。

 

使用setValue和patchValue来操纵表单模型

setValue 方法

this.heroForm.setValue({
  name:    this.hero.name,
  address: this.hero.addresses[0] || new Address()  //(只能显示英雄的第一个住址，不过咱们还必须考虑彻底没有住址的可能性)
});
hero

setValue方法会在赋值给任何表单控件以前先检查数据对象的值。

它不会接受一个与FormGroup结构不一样或缺乏表单组中任何一个控件的数据对象。

若是咱们有什么拼写错误或控件嵌套的不正确，它就能返回一些有用的错误信息。 patchValue会默默地失败

 

patchValue 方法

借助patchValue，咱们能够经过提供一个只包含要更新的控件的键值对象来把值赋给FormGroup中的指定控件

this.heroForm.patchValue({
  name: this.hero.name
});

　　

何时设置表单的模型值（ngOnChanges）

咱们能够在ngOnChanges钩子中调用setValue，就像例子中所演示的那样， 每当输入属性hero发生变化时，Angular就会调用它。

 

重置表单的标识。

咱们应该在更换英雄的时候重置表单，以便来自前一个英雄的控件值被清除，而且其状态被恢复为pristine（原始）状态。 咱们能够在ngOnChanges的顶部调用reset，就像这样

this.heroForm.reset();

reset方法有一个可选的state值，让咱们能在重置状态的同时顺便设置控件的值。 在内部实现上，reset会把该参数传给了setValue。 略微重构以后，ngOnChanges会变成这样

ngOnChanges() {
  this.heroForm.reset({
    name: this.hero.name,
    address: this.hero.addresses[0] || new Address()
  });
}

　　

使用FormArray来表示FormGroup数组

Hero.addresses属性就是一个Address实例的数组。 一个住址的FormGroup能够显示一个Address对象。 而FormArray能够显示一个住址FormGroup的数组

import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';

 

要想使用FormArray，咱们要这么作：

1. 1. 在数组中定义条目（FormControl或FormGroup）。

   2. 把这个数组初始化微一组从数据模型中的数据建立的条目。

   3. 根据用户的需求添加或移除这些条目。

从用户的视角来看，英雄们没有住址。 只有咱们凡人才有住址，英雄们拥有的是秘密小屋！ 把FormGroup型的住址替换为FormArray型的secretLairs定义：

this.heroForm = this.fb.group({
  name: ['', Validators.required ],
  secretLairs: this.fb.array([]), // <-- secretLairs as an empty FormArray
  power: '',
  sidekick: ''
});

　　

表单的控件名从address改成secretLairs让咱们遇到了一个重要问题：表单模型与数据模型再也不匹配了。

显然，必须在二者之间创建关联。但它在应用领域中的意义不限于此，它能够用于任何东西。

展示的需求常常会与数据的需求不一样。 响应式表单的方法既强调这种差别，也能为这种差别提供了便利。

 

初始化FormArray型的secretLairs

下面的setAddresses方法把secretLairs数组替换为一个新的FormArray，使用一组表示英雄地址的FormGroup来进行初始化。

 

setAddresses(addresses: Address[]) {
  const addressFGs = addresses.map(address => this.fb.group(address));
  const addressFormArray = this.fb.array(addressFGs);
  this.heroForm.setControl('secretLairs', addressFormArray);
}

注意，咱们使用FormGroup.setControl方法，而不是setValue方法来设置前一个FormArray。 咱们所要替换的是控件，而不是控件的值。　　

 

获取FormArray

使用FormGroup.get方法来获取到FormArray的引用。 把这个表达式包装进一个名叫secretLairs的便捷属性中来让它更清晰，并供复用

this.heroForm = this.fb.group({
　　name: '',
　　secretLairs: this.fb.array([]),
　　power: '',
　　sidekick: ''
});

get secretLairs(): FormArray {
  return this.heroForm.get('secretLairs') as FormArray;
};

　　

显示FormArray

当前HTML模板显示单个的地址FormGroup。 咱们要把它修改为能显示0、1或更多个表示英雄地址的FormGroup。

要改的部分主要是把之前表示地址的HTML模板包裹进一个<div>中，而且使用*ngFor来重复渲染这个<div>。

诀窍在于要知道如何编写*ngFor。主要有三点：

1. 1. 在*ngFor的<div>以外套上另外一个包装<div>，而且把它的formArrayName指令设为"secretLairs"。 这一步为内部的表单控件创建了一个FormArray型的secretLairs做为上下文，以便重复渲染HTML模板。

   2. 这些重复条目的数据源是FormArray.controls而不是FormArray自己。 每一个控件都是一个FormGroup型的地址对象，与之前的模板HTML所指望的格式彻底同样。

   3. 每一个被重复渲染的FormGroup都须要一个独一无二的formGroupName，它必须是FormGroup在这个FormArray中的索引。 咱们将复用这个索引，以便为每一个地址组合出一个独一无二的标签。

<div formArrayName="secretLairs" class="well well-lg">
  <div *ngFor="let address of secretLairs.controls; let i=index" [formGroupName]="i" >
    <input class="form-control" formControlName="street">
    <input class="form-control" formControlName="city">
    <select class="form-control" formControlName="state">
    <input class="form-control" formControlName="zip">
  </div>
</div>

　　

添加一个addLair方法，它获取secretLairs数组，并把新的表示地址的FormGroup添加到其中。

 

addLair() {
  this.secretLairs.push(this.fb.group(new Address()));
}

<button (click)="addLair()" type="button">Add a Secret Lair</button>

//务必确保添加了type="button"属性。 事实上，咱们应该老是指定按钮的type。 若是不明确指定类型，按钮的默认类型就是“submit”（提交）。 
当咱们稍后添加了表单提交的动做时，每一个“submit”按钮都是触发一次提交操做，而它将可能会作一些处理，好比保存当前的修改。 
咱们显然不会但愿每当用户点击“Add a Secret Lair”按钮时就保存一次。

　

监视控件的变化

用户在父组件HeroListComponent中选取了一个英雄，Angular就会调用一次ngOnChanges

用户修改英雄的名字或秘密小屋时，Angular并不会调用ngOnChanges

经过订阅表单控件的属性之一来了解这些变化，此属性会发出变动通知,  valueChanges，能够返回一个RxJS的Observable对象。

 

添加下列方法，以监听姓名这个FormControl中值的变化

nameChangeLog: string[] = [];
logNameChange() {
  const nameControl = this.heroForm.get('name');
  nameControl.valueChanges.forEach(
    (value: string) => this.nameChangeLog.push(value)
  );
}

在构造函数中调用它，就在建立表单的代码以后

constructor(private fb: FormBuilder) {
  this.createForm();
  this.logNameChange();
}