Angular响应式表单之FormGroup

前面我们了解了下响应式表单的基本控件FormControl，它相当于表单的Input，是构成表单的基本控件。但假设我们的表单是有很多的字段，那挨个去管理FormControl控件会变得很麻烦，我们可以使用FormGroup来集中管理一组FormControl。

FormGroup的实例可以跟踪一组FormControl实例，当创建一个FormGroup时，其中的每个控件都可以根据名字来进行跟踪。

创建FormGroup的实例

还是以登录页表单为例，在组件类中创建loginForm的FormGroup实例，并拥有name和password两个表单控件：

import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, Validators} from "@angular/forms";
@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    ngOnInit() {
        this.loginForm = new FormGroup({
            name: new FormControl(),
            password: new FormControl(),
        });
    }
}

然后关联这个FormGroup到视图中：

<form class="login-form" [formGroup]="loginForm" (ngSubmit)="submit()">
    <mat-form-field>
        <input matInput type="text" formControlName="name" placeholder="账号">
    </mat-form-field>

    <mat-form-field>
        <input matInput type="password" formControlName="password" placeholder="密码">
    </mat-form-field>
</form>

formGroup和formControlName是响应式表单模块提供的指令。当我们用formGroup来管理一组表单控件的时候，使用formControlName将控件和表单绑定是一个很方便的操作。

fromGroup的更新数据方法：setValue和patchValue

前面说FormControl的时候就看到过setValue和patchValue，他们在FormGroup层级上的作用是不一样的。

setValue

setValue是严格遵循表单结构，并整体替换控件的值，比如我们想设置下表单的值，那么我们可以这样做：

this.loginForm.setValue({
    name: 'tony',
    password: '123',
});

需要严格遵循结构的，少一个都不行，比如：

this.loginForm.setValue({
    name: 'tony',
});

这样就不行，会报错。

所以说严格遵循，就是不能多不能少。

patchValue

patchValue方法可以用对象中所定义的任何属性为表单模型进行修补式的赋值。它只会讲匹配的属性进行赋值，会忽略不匹配的。

比如针对性的赋值可以这样写：

this.loginForm.patchValue({
    name: 'tony',
});

运行良好，无副作用。

使用FormBuilder服务

我们处理表单的过程中，有时候会遇到很复杂的表单，手动去创建多个表单控件就会变得非常不开心。Angular提供了FormBuilder服务来方便的生成表单控件，使用起来更方便简单。

我们用FormBuilder来重写上面的loginForm表单。

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

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    constructor(
        private _fb: FormBuilder,
    ) {
    }
    ngOnInit() {
        this.loginForm = this._fb.group({
            name: null,
            password: null,
        });
    }
}

使用FormBuilder生成的表单和前面手写的使用起来都没啥区别。

我记得前面好长一段时间我竟然不知道使用FormBuilder的时候如何去设置某个表单控件为禁用，就不得不在FormBuilder里面对特别控件写new FormControl。也是醉了。

那么我们怎么去在FormBuilder里面设置某个控件为禁用呢？很简单：

this.loginForm = this._fb.group({
    name: [{value: null, disabled: true}],
    password: null,
});

重置表单和获取表单的值

重置表单和获取表单的值算是很常见的场景了，我们可以单独的去重置某个表单项。

首先，我们从FormGroup中获取单个的表单控件的方式有两种：

const name = this.registerForm.controls['name'];

或者:

const name = this.registerForm.get('name');

然后可以去重置这个表单项：

name.reset();

获取这个表单项的值：

const value = name.value;

为了方便，我们直接在FormGroup上来操作。

重置：

this.registerForm.reset();

重置了FormGroup上的所有表单控件。

获取值：

const values = this.registerForm.getRawValue();

getRawValue获得的是FormGroup上结构的所有属性的值，具体访问的时候可以使用key进行访问：

const nameValue = values.name;