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只能修改值，无法修改状态。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。