序

众所周知，在angular中formgroup、formarray、formcontrol、formrecord是构建响应式表单的四大基本构件，今天就来和大家聊一下formgroup和formcontrol，从这篇文章中，我们可以了解到：

什么是angular中的formcontrol
什么是angular中的formgroup
在表单中如何注册formgroup
angular中的嵌套formgroup
如何在formgroup中控制一个formcontrol
如何设置一个formgroup的值
angular中的formbuilder

什么是Angular中的FormControl？

在 Angular 中，formControl用于跟踪单个表单控件的值和验证状态。响应式表单中的每个表单输入都应该由一个form control绑定。它是构成响应式表单的基本单位。

什么是Angular的FormGroup?

form group是一组form control的集合，将其子formcontrol的名字作为key，其值作为value，用来去跟踪这组form control的值和状态。初始化时，form group中的每个form control都通过名称进行标识并初始化。它和FormControl、FormArray以及FormRecord一样，都扩展于abstractControl类，使其能访问值、验证状态、用户交互和事件。

在表单中如何注册formGroup

首先我们需要先从angular的表单模块导入对应的formGroup并在类式组件中声明：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'
@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
  bioSection = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    age: new FormControl('')
  });

   constructor() { }
   ngOnInit() {}
}

然后我们在html中写入一个表单控件并将其绑定对应的formGroup，将对应的子元素绑定上相应的formcontrol：

<form [formGroup]="bioSection" (ngSubmit)="callingFunction()">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>
  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>
  <label>
    Age:
    <input type="text" formControlName="age">
  </label>
  <button type="submit">Submit Application</button>
</form>

就像普通的表单元素一样，FormGroup的名称用于标识html中的FormGroup，并且当我们在提交时触发对应的回调函数

angular中的嵌套formgroup

angular响应式表单可以将一个formgroup嵌套在另一个formgroup中：

  bioSection = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    age: new FormControl(''),
    stackDetails: new FormGroup({
      stack: new FormControl(''),
      experience: new FormControl('')
    }),
    address: new FormGroup({
        country: new FormControl(''),

        city: new FormControl('')
    })
  });

正如上述所看到的一样，bioSection这个formgroup中会嵌套一个子属性address，它是一个嵌入的子formgroup，我们使用冒号进行声明，而在页面中，可以将其映射到想要的位置：

<form [formGroup]="bioSection" (ngSubmit)="callingFunction()">

  <h3>Bio Details</h3>
  <label>
    First Name:
    <input type="text" formControlName="firstName" />
  </label>
  <br />
  <label>
    Last Name:
    <input type="text" formControlName="lastName" />
  </label>
  <br />
  <label>
    Age:
    <input type="text" formControlName="age" />
  </label>
  <div formGroupName="stackDetails">
    <h3>Stack Details</h3>

    <label>
      Stack:
      <input type="text" formControlName="stack" />
    </label>
    <br />

    <label>
      Experience:
      <input type="text" formControlName="experience" />
    </label>
  </div>
  <div formGroupName="address">
    <h3>Address</h3>

    <label>
      Country:
      <input type="text" formControlName="country" />
    </label>
    <br />

    <label>
      City:
      <input type="text" formControlName="city" />
    </label>
  </div>
  <button type="submit">Submit Application</button>
</form>

最后当我们使用该表单并进行提交时，就会在控制台打印的结果

如何在formgroup中控制一个formcontrol

为了去crud FormGroup中的控件，我们可以使用以下命令：

addControl() 添加一个控件并更新它的值和有效性
removeControl() 移除一个控件
setControl() 对一个已存在的控件进行设置
contains() 返回一个布尔值,检查组内是否有一个具有指定名字的控件

如何去设置一个FormGroup的值

在响应式表单中，我们可以对整个FormGroup设置值，也可以直接对其中的一些属性单独设置值，当我们只对一些属性设置值时，可以使用patchValue去设置值，此时我们不需要对整个formgroup设置值，未设置的属性也不会有影响，例如这样：

    bioSection = new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      age: new FormControl(''),
      stackDetails: new FormGroup({
        stack: new FormControl(''),
        experience: new FormControl(''),
      }),
      address: new FormGroup({
        country: new FormControl(''),

        city: new FormControl(''),
      }),
    });
    this.bioSection.patchValue({age: '12'});

而当我们需要对整个formgroup设置值时，则需要使用setvalue进行设置，值得一提的是，当我们设置的值不全时，则代码会报错：