FormControl跟踪独立表单控件的值和验证状态。
它和 FormGroup 和 FormArray 是 Angular 表单的三大基本构造块之一。 它扩展了 AbstractControl 类,并实现了关于访问值、验证状态、用户交互和事件的大部分基本功能。
参数
formState
使用一个初始值或定义了初始值和禁用状态的对象初始化该控件。
使用方式:
form.controls.控件名.state
form.get(‘控件名’).state
this.paramsForm.controls.customerName.status
this.paramsForm.get('customerName').status
常用方法
1、setValue() 设置该表单控件的新值。
2、patchValue() 修补控件的值。
注意:在 FormControl 这个层次上,该函数的功能和 setValue 完全相同。 但 FormGroup 和 FormArray 上的 patchValue 则具有不同的行为。
3、reset() 重置该表单控件,把它标记为 pristine 和 untouched,并把它的值设置为 null。
4、registerOnChange() 注册变更事件的监听器。
5、registerOnDisabledChange() 注册禁用事件的监听器。
使用说明
1、用一个初始值初始化 FormControl。
const control = new FormControl('some value');
console.log(control.value); // 'some value'
2、下面的例子用一个表单状态对象初始化控件。这里用到的是 value 和 disabled 键。
const control = new FormControl({ value: 'n/a', disabled: true });
console.log(control.value); // 'n/a'
console.log(control.status); // 'DISABLED'
3、下面的例子使用一个同步验证器初始化了该控件。
const control = new FormControl('', Validators.required);
console.log(control.value); // ''
console.log(control.status); // 'INVALID'
4、把该控件重置回初始值
const control = new FormControl('Nancy');
console.log(control.value); // 'Nancy'
control.reset('Drew');
console.log(control.value); // 'Drew'
5、把该控件重置回初始值并禁用。
const control = new FormControl('Nancy');
console.log(control.value); // 'Nancy'
console.log(control.status); // 'VALID'
control.reset({ value: 'Drew', disabled: true });
console.log(control.value); // 'Drew'
console.log(control.status); // 'DISABLED'
control.patchValue({ value: 'Drew1212', disabled: false });
console.log(control.value); // {value: 'Drew1212', disabled: false}
console.log(control.status); // 'DISABLED'
control.reset({ value: 'Drew155', disabled: false });
console.log(control.value); // 'Drew155'
console.log(control.status); // 'VALID'
注意: reset() 可以修改控件的禁用状态,patchValue只能修改值,无法修改状态。