FormGroup跟踪一组FormControl实例的值和有效性状态。
FormGroup把每个子FormControl的值聚合进一个对象,它的key是每个控件的名字。它通过归集其子控件的状态值来计算出自己的状态 。比如,若组中的任何一个控件是无效的,那么整个组就是无效的。
FormCroup是Angular中用来定义表单的三大基本构造块之一,就像FormControl、FormArray一样。
当实例化FormGroup时,在第一个参数中传入一组子控件。每个子控件会用控件名把自己注册进去。
属性
controls是FormCrou的属性,打印FormCroup的controls属性,是一组子控件。
上述方法是动态选择子控件,并重置子控件的值。
this.paramsForm.controls.customerId.reset(data.customerId);
使用点取值,是获取特定的值,中括号是动态取值。
常用方法
1、addControl() 往组中添加一个控件。 该方法还会更新本控件的值和有效性。
使用方法如下图:
2、removeControl() 从该组中移除一个控件。
this.formData.removeControl('子控件名');
3、setControl() 替换现有控件。
4、contains() 检查组内是否有一个具有指定名字的已启用的控件。对于已禁用的控件返回 false,否则返回 true。对于已禁用的控件,返回 false。如果你只想检查它是否存在于该组中,请改用 get 代替。
打印结果如下:
使用get方法当控件存在时,返回该控件,当不存在时,直接返回null,如下图:
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 中排除了所有已禁用的控件。