FormGroup跟踪一组FormControl实例的值和有效性状态。

FormGroup把每个子FormControl的值聚合进一个对象,它的key是每个控件的名字。它通过归集其子控件的状态值来计算出自己的状态 。比如,若组中的任何一个控件是无效的,那么整个组就是无效的。

FormCroup是Angular中用来定义表单的三大基本构造块之一,就像FormControl、FormArray一样。

当实例化FormGroup时,在第一个参数中传入一组子控件。每个子控件会用控件名把自己注册进去。

属性

controls是FormCrou的属性,打印FormCroup的controls属性,是一组子控件。

group aggregation在uipath中怎么用 group form_angular


group aggregation在uipath中怎么用 group form_Group_02


上述方法是动态选择子控件,并重置子控件的值。

this.paramsForm.controls.customerId.reset(data.customerId);

使用点取值,是获取特定的值,中括号是动态取值

常用方法

1、addControl() 往组中添加一个控件。 该方法还会更新本控件的值和有效性。

使用方法如下图:

group aggregation在uipath中怎么用 group form_控件_03


2、removeControl() 从该组中移除一个控件。

this.formData.removeControl('子控件名');

3、setControl() 替换现有控件。

4、contains() 检查组内是否有一个具有指定名字的已启用的控件。对于已禁用的控件返回 false,否则返回 true。对于已禁用的控件,返回 false。如果你只想检查它是否存在于该组中,请改用 get 代替。

group aggregation在uipath中怎么用 group form_Group_04


打印结果如下:

group aggregation在uipath中怎么用 group form_重置_05


使用get方法当控件存在时,返回该控件,当不存在时,直接返回null,如下图:

group aggregation在uipath中怎么用 group form_控件_06


group aggregation在uipath中怎么用 group form_控件_07


5、setValue() 设置此FormGroup的值。它接受一个与组结构对应的对象,以控件名作为key

使用方式如下:

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'}

6、patchValue() 修补此FormValue的值。它接受一个以控件名为key的对象,并尽量把它们的值匹配到组中正确的控件上。它能接受组的超集和子集,而不会抛出错误。
使用方式如下:

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}

7、reset() 重置这个FormGroup,把它的各级子控件都标记pristine和untouched,并把它们的值都设置为null。
参数:value 使用一个初始值或包含初始值与禁用状态的对象重置该控件
你可以通过传入一个与表单结构相匹配的以控件名为 key 的 Map,来把表单重置为特定的状态。 其状态可以是一个单独的值,也可以是一个同时具有值和禁用状态的表单状态对象。
使用方式如下:

const form = new FormGroup({
      first: new FormControl('first name'),
      last: new FormControl('last name')
    });
    
    console.log(form.value);  // {first: 'first name', last: 'last name'}
    
    form.reset({ first: 'name', last: 'last name' });
    
    console.log(form.value);  // {first: 'name', last: 'last name'}
    
    form.controls.first.reset('hahaha');
    
    console.log(form.value);  // {first: 'hahaha', last: 'last name'}
const form = new FormGroup({
      first: new FormControl('first name'),
      last: new FormControl('last name')
    });
    
    form.reset({
      first: {value: 'name', disabled: true},
      last: 'last'
    });
    
    console.log(form.value);  // {last: 'last'}
    console.log(form.getRawValue());  // {first: 'name', last: 'last'}
    console.log(form.get('first').status);  // 'DISABLED'

注意:form.value只能获取未禁用的控件的值,form.getRawValue()可以获取所有控件的值。
8、getRawValue() 这个 FormGroup 的聚合值,包括所有已禁用的控件。获取所有控件的值而不管其禁用状态。 value 属性是获取组中的值的最佳方式,因为它从 FormGroup 中排除了所有已禁用的控件。