angular 响应式表单（1）基础表单控件、表单组

个人理解，表单的目的就是收集用户输入的数据，对这些数据进行处理，进而将收集的数据发送给服务器。

1.使用响应式表单前，需要在相应的module引入ReactiveFormsModule，注册响应式表单模块

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

注：在@NgModule中的imports数组也要加上ReactiveFormsModule

2.利用FormControl创建一个简单的响应式表单

使用表单控件FormControl的两个步骤：
（1）在ts中， 导入FormControl类，并创建FormControl的实例 name
1.name = new FormControl('Mike');用FormControl的构造函数设置初始值为Mike
2.formControl实例会通过valueChanges来发出新值，所以监听valueChanges的变化即可以得到最新值
3.通过setValue()来改变值
4.value属性可以获取值，如下代码：

import { FormControl } from '@angular/forms';

export class AppComponent implements OnInit {

  name = new FormControl('Mike');

  ngOnInit() {
    this.name.valueChanges.subscribe(newValue => {
      console.log(newValue);
    });
    // this.name.setValue('123');
  }

}

（2）在html中，用[formControl]="name"在模板中注册该控件

<div>
    姓名： <input type="text" placeholder="请输入姓名" [formControl]="name">
</div>

{{name.value}}

3.表单组FormGroup

表单组定义了一个带有一组控件的表单，当需要的控件很多时，可以用FormGroup控件将这一组控件管理起来,将表单组添加到组件需要执行的步骤
（1）在ts中创建FormGroup实例
1.value属性获取checkForm的值，是一个对象
2.this.checkForm.controls.firstName.setValue('Join');替换单个控件的值
3.patchValue为整个FormGroup赋值
4.valueChanges监听控件变化

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

export class AppComponent implements OnInit {

  checkForm = new FormGroup({
    firstName: new FormControl('Taylor'),
    lastName: new FormControl('Swift')
  });

ngOnInit() {
    this.checkForm.valueChanges.subscribe(newValue => {
      console.log(newValue);
    });
    this.checkForm.controls.firstName.setValue('Join');
    this.checkForm.patchValue({firstName: 'Jane', lastName: 'Smith'});
    console.log(this.checkForm.value);
   }
}

在html中注册控件

<form [formGroup]="checkForm">
  <div class="m-5">
    firstName： <input type="text" placeholder="请输入姓名" formControlName="firstName">
  </div>
  <div class="m-5">
    lastName： <input type="text" placeholder="请输入姓名" formControlName="lastName">
  </div>
</form>

4.使用FormBuilder服务生成控件

当你需要写多个表单时，手动创建非常麻烦，FormBuilder服务提供方法让你快捷生成表单控件，步骤
（1）导入FormBuilder类、注入服务
（2）生成表单内容
将ts改为：

import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
export class AppComponent implements OnInit {

  constructor(private fb: FormBuilder){}

  // checkForm = new FormGroup({
  //   firstName: new FormControl('Taylor'),
  //   lastName: new FormControl('Swift')
  // });

  checkForm = this.fb.group({
    firstName: '',
    lastName: ''
  });

利用FormBuilder服务就不再需要写很多new FormControl之类的东西，上面代码是用了FormBuilder服务的group()方法来生成FormGroup，FormBuilder还有control()和array()方法来生成FormControl和FormArray