Angular学习笔记44：响应式表单-获取两层FormGroup嵌套值得变化和两层FormGroup赋值

继Angular学习笔记43：响应式表单：FormGroup嵌套以后。

获取FormGroup中值得变化

在 FormGroup 中，有时需要捕获这个控件的值得变化，

• 捕获name的输入值得变化
  在构造方法中，订阅validateForm中name这个实例值得变化。并将其输入。

constructor() {
    this.validateForm.get('name').valueChanges.subscribe(nameChange => {
      console.log(nameChange);
    });
  }

保存运行，在name这个控件中输入相应的值，在控制台可以看到每次变化的值。

获取嵌套中FormGroup中值得变化

1. 使用validateForm连续的get()方法:

this.validateForm.get('address')
      .get('area').valueChanges
      .subscribe(areaChange => {
        console.log(areaChange);
      });

2. 利用 get 方法返回一个FormGroup

get addressForm() {
    return this.validateForm.get('address') as FormGroup;
  }

通过这个addressForm来捕获到address第二层中值得变化

this.addressForm.get('street')
      .valueChanges
      .subscribe(streetChange => {
        console.log(streetChange);
      });

修改后的类文件如下：

import {Component, OnInit} from '@angular/core';
import {AsyncValidator, FormControl, Validators, FormBuilder, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-user-info',
  templateUrl: './user-info.component.html',
  styleUrls: ['./user-info.component.less']
})
export class UserInfoComponent implements OnInit {
  validateForm = new FormGroup({
    name: new FormControl(null, [Validators.required]),
    age: new FormControl(null, [Validators.required]),
    email: new FormControl(null, [Validators.required]),
    address: new FormGroup({
      area: new FormControl(null, [Validators.required]),
      street: new FormControl(null, [Validators.required]),
      houseId: new FormControl(null, [Validators.required]),
    })
  });

  constructor() {
    this.validateForm.get('name').valueChanges.subscribe(nameChange => {
      console.log(nameChange);
    });
    this.addressForm.get('street')
      .valueChanges
      .subscribe(streetChange => {
        console.log(streetChange);
      });
    this.validateForm.get('address')
      .get('area').valueChanges
      .subscribe(areaChange => {
        console.log(areaChange);
      });
  }
  
  get addressForm() {
    return this.validateForm.get('address') as FormGroup;
  }

  ngOnInit() {
  }

  public handleInitForm(): void {
    this.validateForm.reset();
  }

  public handleSubmit(): void {
    console.log('点击了提交表单');
    console.log(this.validateForm.value);
  }
}

在Angular学习笔记40：响应式表单：一个简单的表单并修改表单的值中，使用了formControl 的 setValue() 方法对单个FormControl进行赋值。
在 FormGroup 中同样可以使用setValue()方法来为 FormGroup 赋值。

对整个 FormGroup 赋值

如果要对整个 FormGroup 赋值,就要将 FormGroup 中的每一个实例都要赋值，不能丢掉任何一个实例。

this.validateForm.setValue({
      name: 'W先生',
      age: '25',
      email: 'xx@xx.com',
      address: {area: 'area赋值', street: 'street赋值', houseId: 'houseId赋值'}
    });

当我们不小心丢掉一个实例的时候，就会报错:(为了试错，将houseId丢掉了)

this.validateForm.setValue({
      name: 'W先生',
      age: '25',
      email: 'xx@xx.com',
      address: {area: 'area赋值', street: 'street赋值', }
    });

此时保存运行就会报错：

为了解决这个错误，可以使用 FormGroup 的patchValue()的这个方法，patchValue()相比较 setValue()而言，在遇到赋值过程中，遇到实例丢失的情况时，会自动的将这里定为失败，而setValue() 会严格遵守原来 validateForm 的表单结构，并整体替换。
使用patchValue()对表单进行赋值：

this.validateForm.patchValue({
      name: 'W先生',
      age: '25',
      email: 'xx@xx.com',
      address: {area: 'area赋值', street: 'street赋值'}
    });

此时即使丢掉了 houseId，也不会报错，只是 houseId 没有正确的赋值。

对单个 FormGroup 中的某一个实例 赋值

对FormGroup第一层的name单独赋值：

1.使用setValue()

this.validateForm.get('name').setValue('W先生');

2.使用patchValue()

this.validateForm.get('name').patchValue('W先生');

对第二层的 FormGroup 赋值

由于第二层的 FormGroup 是第一层 FormGroup的 address这个实例的，所以先获取到address这个实例。然后在对这个实例的 FormGroup 进行赋值。
1.使用setValue()

• 直接通过validateForm进行赋值：

this.validateForm.get('address').setValue({
      area: 'area赋值',
      street: 'street赋值',
      houseId: 'houseId赋值'
    });

注意：使用setValue()时必须要保持赋值结构和address这个formGroup的表单的结构的一致

• 使用 get 方法获取的FormGroup进行赋值：

this.addressForm.setValue({
      area: 'area赋值',
      street: 'street赋值',
      houseId: 'houseId赋值'
    });

同样：这里也要注意保持赋值结构和address这个formGroup的表单的结构的一致

2.使用patchValue()

• 直接通过validateForm进行赋值：

this.validateForm.get('address').patchValue({
      area: 'area赋值',
      street: 'street赋值',
      houseId: 'houseId赋值'
    });

• 使用 get 方法获取的FormGroup进行赋值：

this.addressForm.patchValue({
      area: 'area赋值',
      street: 'street赋值',
      houseId: 'houseId赋值'
    });

对第二层中的 FormGroup 中的某一个实例 赋值

对第一层FormGroup的address中的area单独赋值：

1.使用setValue()

• 直接通过validateForm进行赋值：

this.validateForm.get('address').get('area').setValue('area赋值');

• 使用 get 方法获取的FormGroup进行赋值：

this.addressForm.get('area').setValue('area赋值');

2.使用patchValue()

• 直接通过validateForm进行赋值：

this.validateForm.get('address').get('area').patchValue('area赋值');

• 使用 get 方法获取的FormGroup进行赋值：

this.addressForm.get('area').patchValue('area赋值');