## FormGroup 追踪一组`FormControl`实例的值和验证状态。 `FormGroup`聚合每一个子节点(`FormControl`)的值和验证状态到一个对象，并将控件名作为键值。通过逐步减少子节点状态计算它自身状态。例如：如果在`FormArray`中有一个子节点验证失败，那么最终整个对象验证也会失败。 `FormGroup`同`FormControl`及`FormArray`一同构成Angular表单3大基础功能模块。 ### 使用方式 实例化`FormForm`，传入一个子节点数组作为第1个参数，属性名为每一个子节点要注册的控件名。 ```typescript const form = new FormGroup({ first: new FormControl('Nancy', Validators.minLength(2)), last: new FormControl('Drew'), }); console.log(form.value); // {first: 'Nancy', last; 'Drew'} console.log(form.status); // 'VALID' ``` You can also include group-level validators as the second arg, or group-level async validators as the third arg. These come in handy when you want to perform validation that considers the value of more than one child control. ```typescript const form = new FormGroup({ password: new FormControl('', Validators.minLength(2)), passwordConfirm: new FormControl('', Validators.minLength(2)), }, passwordMatchValidator); function passwordMatchValidator(g: FormGroup) { return g.get('password').value === g.get('passwordConfirm').value ? null : {'mismatch': true}; } ``` ### 添加或者移除控件 可以通过调用`FormArray`本身的`push`, `insert`或者`removeAt`方法来改变数组中的控件。这些方法能够保证在表单层级树中控件状态能够合理的被跟踪到。不建议直接修改`FormArray`中的`AbstractControl`实例，因为它会导致一些奇怪和无法预期的行为，例如打断Angular的值检测。 ### Class ```typescript class FormGroup { constructor(controls: {[key: string]: AbstractControl}, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn) controls : {[key: string]: AbstractControl} registerControl(name: string, control: AbstractControl) : AbstractControl addControl(name: string, control: AbstractControl) : void removeControl(name: string) : void setControl(name: string, control: AbstractControl) : void contains(controlName: string) : boolean setValue(value: {[key: string]: any}, {onlySelf}?: {onlySelf?: boolean}) : void patchValue(value: {[key: string]: any}, {onlySelf}?: {onlySelf?: boolean}) : void reset(value?: any, {onlySelf}?: {onlySelf?: boolean}) : void getRawValue() : Object } ``` ### 属性 - controls : `AbstractControl[]` 包含的控件集合 - registerControl(name: `string`, control: `AbstractControl`) : `AbstractControl` 在当前控件所属对象中注册一个新的控件。该方法并不会更新控件的值和验证状态，因此大多数情况下最好使用`addControl`来创建新的控件。 - addControl(name: `string`, control: `AbstractControl`) : `void` 在当前对象中添加一个新的控件。 - removeControl(name: `string`) : `void` 从当前对象中移除一个控件。 - setControl(controlName: `string`, control: `AbstractControl`) : `void` 替换已存在的控件 - contains(controlName: `string`) : `boolean` 在当前对象中检查是否存在给定名称的已激活控件。对于禁用的控件它将返回`false`， 如果需要检查控件是否存在，请使用`get`方法。 - setValue(value: {[key: `stirng`]: `any`}, {onlySelf}?: {onlySelf?: `boolean`}) : `void` 设置`FormGroup`的值。接收一个以控件名为属性，并且满足group格式的对象。 该方法会执行严格检查，即如果尝试传递一个不存在或被移除的控件，它会直接抛出错误。 ```typescript const form = new FormGroup({ first: new FormControl(), last: new FormControl() }); console.log(form.value); // {first: null, last: null} form.setValue({first: 'Nancy', last: 'Drew'}); console.log(form.value); // {first: 'Nancy', last: 'Drew'} ``` - patchValue(value: {[key: `stirng`]: `any`}, {onlySelf}?: {onlySelf?: `boolean`}) : `void` 填充`FormGroup`对象的值，同样接收一个以控件名为属性，并且满足group格式的对象，不同的是它会尽量把传入的参数匹配到正确控件。它可以接收上一级或者子集对象，而不会报错。 ```typescript const form = new FormGroup({ first: new FormControl(), last: new FormControl() }); console.log(form.value); // {first: null, last: null} form.patchValue({first: 'Nancy'}); console.log(form.value); // {first: 'Nancy', last: null} ``` - reset(value?: `any`, {onlySelf?}: {onlySelf?: `boolean`}) : `void` 重置`FormGroup`值。 You can also reset to a specific form state by passing in a map of states that matches the structure of your form, with control names as keys. The state can be a standalone value or a form state object with both a value and a disabled status. ```typescript this.form.reset({first: 'name', last; 'last name'}); console.log(this.form.value); // {first: 'name', last: 'last name'} ``` 或者： ```typescript this.form.reset({ first: {value: 'name', disabled: true}, last: 'last' }); console.log(this.form.value); // {first: 'name', last: 'last name'} console.log(this.form.get('first').status); // 'DISABLED' ``` - getRawValue() : `any[]` 获取`FormGroup`数组的聚合值，包含任何被禁用的控件。 如果想获取所有值包括被禁用的状态，请使用此方法。否则，使用`value`属性是最好获取数组中值的方式。