## FormControl 追蹤單個控件的值和驗證狀態。 `FormControl`同`FormGroup`及`FormArray`一同構成Angular表單3大基礎功能模塊。 ### 使用方式 實例化`FormControl`，傳遞一個初始化值作為第一個參數。 ```typescript const ctrl = new FormControl('some value'); console.log(ctrl.value); // 'some value' ``` 也可以在實例化的時候初始化一個狀態對象，包括初始值和當前控件是否被禁用的狀態。在使用對象方式初始化值的時候必須同時包含`value`和`disabled`兩個屬性，不能只指定`value`值。 ```typescript const ctrl = new FormControl({value: 'n/a', disabled: true}); console.log(ctrl.value); // 'n/a' console.log(ctrl.status); // 'DISABLED' ``` 在當前控件中包含一個同步驗證驗證器（一組同步驗證器），請傳入第二個參數。同樣，異步驗證器也可以，但需要作為第三個參數單獨傳入。 ```typescript const ctrl = new FormControl('', Validators.required); console.log(ctrl.value); // '' console.log(ctrl.status); // 'INVALID' ``` ### Class ```typescript class FormControl { constructor(formState?: any, validator?: ValidatorFn|ValidatorFn[], asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]) setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}?: {?: boolean,?: boolean,?: boolean,?: boolean}) : void patchValue(value: any, options?: {?: boolean,?: boolean,?: boolean,?: boolean}) : void reset(formState?: any, {onlySelf}?: {onlySelf?: boolean}) : void registerOnChange(fn: Function) : void registerOnDisabledChange(fn: (isDisabled: boolean) => void) : void } ``` ### 屬性 - setValue(value: `any`, {onlySelf, emitEvent, emitModelToViewChange, emitViewToModelChange}?: { onlySelf?: `boolean`, emitEvent?: `boolean`, emitModelToViewChange?: `boolean`, emitViewToModelChange?: `boolean` }) : `void` 設置控件的`value`值。 如果`onlySelf`為`true`，當前操作只會影響控件本身的驗證狀態，不會影響父節點。默認為`false`。 如果 `emitEvent`為`true`，當前操作會發送一個`valueChanges`事件。默認為`true` (as it falls through to `updateValueAndValidity`) 如果`emitModelToViewChange`為`true`，當前操作會發送`onChange`事件通知視圖。默認為`true` 如果`emitViewToModelChange`為`true`，會觸發`ngModelChange`事件更新模型。默認為`true`。 - patchValue(value: `any`, options?: { onlySelf?: `boolean`, emitEvent?: `boolean`, emitModelToViewChange?: `boolean`, emitViewToModelChange?: `boolean` }) : `void` 功能同`setValue`，目的是和`FormGroup`和`FormArray`保持一質，但功能不同。 - reset(formState?: `any`, {onlySelf}?: {onlySelf?: `boolean`}) : `void` You can also reset to a specific form state by passing through a standalone value or a form state object that contains both a value and a disabled state (these are the only two properties that cannot be calculated). ```typescript this.control.reset('Nancy'); console.log(this.control.value); // 'Nancy' ``` 或者 ```typescript this.control.reset({value: 'Nancy', disabled: true}); console.log(this.control.value); // 'Nancy' console.log(this.control.status); // 'DISABLED' ``` - registerOnChange(fn: `Function`) : `void` 注冊一個監聽變化的事件監聽器。 - registerOnDisabledChange(fn: (isDisabled: `boolean`) => `void`) : `void` 注冊一個監聽控件禁用狀態變化的事件監聽器。