FormControl的属性和常用方法

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