> This is the base class for `FormControl`, `FormGroup`, and `FormArray`.
## 構造函數
```javascript
constructor(validator: ValidatorFn, asyncValidator: AsyncValidatorFn) {};
```
## 屬性
- validator : `ValidatorFn`
同步驗證函數接口,方法約定為:`(c: AbstractControl): {[key: string]: any;}`
- asyncValidator : `AsyncValidatorFn` 異步驗證函數接口,方法約定為:`(c: AbstractControl): any`
- value: any 控件的value值
- status: `string`
控件的驗證狀態,有以下4種狀態
**VALID**: 控件通過所有驗證器
**INVALID**: 至少有一個驗證器驗證驗證失敗
**PENDING**: 控件正處于一個驗證器中
**DISABLED**: 該控件不需要驗證
> **注意**:這些狀態是互相排斥的,因此一個控件不能同時處于valid和invalid或者invalid和disabled狀態。
- valid : `boolean` 當`status === VALID`時
- invalid : `boolean` 當`status === INVALID`時
- pending : `boolean` 當`status === PENDING`時
- disabled : `boolean` 當`status === DISABLED`時
> **注意**:禁用的控件不受驗證檢查,同時不包含在它們的祖先控件的聚合值中。
- enabled: `boolean` 當`status !== DISABLED`時,換句話說它可以處于`VALID`, `INVALID`或者`PENDING`的某一個狀態中。
- errors : `{[key: string]: any}` 返回所有驗證失敗的消息,全部通過則返回`null`
- pristine : `boolean` 用戶還未進行任何操作
> **注意**:通過編程方式更改控件的value并不能將其標記為`dirty`狀態。
- dirty : boolean 用戶通過界面操作改變了控件的value值。
> **注意**:通過編程方式更改控件的value并不能將其標記為`dirty`狀態。
- touched : `boolean` 用戶觸發了`blur`事件
- untouched : `boolean` 用戶未觸發`blur`事件
- valueChanges : `Observable<any>`
當控件的的值通過UI操作或者程序操作發生變化時,發送通知事件。
- statusChanges : `Observable<any>`
當控件的狀態發生變化時,發送通知事件。
- setValidators(newValidator: `ValidatorFn` | `ValidatorFn[]`) : `void` 在當前控件創建一個同步驗證器,調用時會覆蓋任何已存在的同步驗證器。
- setAsyncValidators(newValidator: `AsyncValidatorFn | AsyncValidatorFn[]`) : `void` 在當前控件創建一個異步驗證器,調用時會覆蓋任何已存在的異步驗證器。
- clearValidators() : `void` 清空同步驗證器
- clearAsyncValidators() : `void` 清空異步驗證器
- markAsTouched({onlySelf}?: {onlySelf?: `boolean`}) : `void` 將控件標記為`touched`,同時會將其所在的父節點標記為`touched`以維持模型狀態一致。
- markAsUntouched({onlySelf?}: {onlySelf?: `boolean`}) : `void` 將控件標記為`untouched`, 如果該控件有子節點,還會將所有子節點標記為`untouched`以維持模型狀態一致,同時會重新計算所有父節點的`touched`狀態。
- markAsDirty({onlySelf}?: {onlySelf?: `boolean`}) : `void` 將控件標記為`dirty`, 同樣會將其所在的父節點標記為`dirty`以維持模型狀態一致。
- markAsPristine({onlySelf?}: {onlySelf?: `boolean`}) : `void` 將控件標記為`pristine`, 如果該控件有子節點,還會將所有子節點標記為`pristine`以維持模型狀態一致,同時會重新計算所有父節點的`pristine`狀態。
- markAsPending({onlySelf}?: {onlySelf?: `boolean`}) : `void` 將控件標記為`pending`。
- disable({onlySelf, emitEvent}?: {onlySelf?: `boolean`, emitEvent?: `boolean`}) : `void` 禁用控件。禁用的控件不受驗證檢查,同時不包含在它們的祖先控件的聚合值中。它的驗證狀態為`DISABLED`。如果該控件有子節點,同樣會禁用子節點以維持模型狀態一致。
- enable({onlySelf, emitEvent}?: {onlySelf?: `boolean`, emitEvent?: `boolean`}) : `void`
啟用控件。這意味著會在其父節點的聚合值中進行驗證,然后會基于現有的值和狀態重新計算狀態。如果控件存在子節點,會啟用所有子節點。
- setParent(parent: `formGroup | FormArray`) : `void`
- setValue(value: any, options?: `object`) : `void` 抽象方法。設置控件的`value`值。
- patchValue(value: any, options?: `object`) : `void` 抽象方法。填充控件`value`值,內部調用`setValue`
- reset(value?: any, options?: `object`) : `void` 抽象方法。重置控件`value`值
- updateValueAndValidity({onlySelf, emitEvent}?: {onlySelf?: `boolean`, emitEvent?: `boolean`}) : `void` 重新計算表單值和驗證狀態,默認會更新父節點的表單直和狀態。
- setErrors(errors: {[key: `string`]: any}, {emitEvent}?: {emitEvent?: `boolean`}) : `void` 設置控件驗證消息。 主要用于手動設置控件的驗證消息,同時會更新父節點的狀態。
- get(path: `Array<string|number>|string`) : `AbstractControl` 獲取給定名稱或者路徑下的子節點,可以使用數組和字符串(點號分隔)2種方式傳入。
```javascript
this.form.get('person.name');
// or
this.form.get(['person', 'name'])
```
- getError(errorCode: `string`, path?: `string[]`) : any 如果傳入的`path`有指定的錯誤消息則返回`true`,否者返回`null`或者`undefined`,如果沒有傳入`path`則在父節點上查找是否存在傳入的錯誤消息。
```javascript
this.userForm.controls['name'].getError('required');
this.userForm.get('name').getError('required');
// or
this.userForm.getError('required', ['name']);
```
- hasError(errorCode: `string`, path?: `string[]`) : `boolean` 同`getError`
- root : `AbstractControl` 獲取祖先節點
- 說明
- angular 1.x
- ngModelController
- ngOptions
- ngModelOptions
- lifecycle
- directive
- angular 2
- @angular/forms
- 類
- AbstractControl
- AbstractControlDirective
- AbstractFormGroupDirective
- FormControl
- FormArray
- FormBuilder
- FormGroup
- NgControl
- 接口
- controlValueAccessor
- 指令
- DefaultValueAccessor
- Angular 2 生命周期
- OnInit
- DoCheck
- @angular/router
- 配置
- Routes
- 指令
- RouterOutlet
- RouterLink
- 接口
- ActivatedRoute
- UrlTree
- NavigationExtras
- ActivatedRouteSnapshot
- RouterStateSnapshot
- 類
- UrlSegment
- UrlSegmentGroup
- UrlSerializer
- DefaultUrlSerializer
- Router
- bug記得
- @angular/http
- 類
- Http
- Body
- Response
- ResponseOptions
- Header
- Request
- RequestOptions
- URLSearchParams
- @angular/core
- decorator
- Component-decorator
- animation
- DI
- linker
- TemplateRef
- ElementRef
- EmbeddedViewRef
- ViewRef
- ViewContainerRef
- Query
- ComponentFactory
- ComponentRef
- Renderer
- change_detection
- KeyValueDiffers
- IterableDiffers
- ChangeDetectorRef
- ChangeDetectionStrategy
- Zone
- ngZone
- @angular/common
- 指令
- NgTemplateOutlet
- QueryList
- bootstrap4
- card
- form
- 重點關注博客
- 學習過的文章
- 筆記
- Angular 2 雙向綁定
- 將字符串解析成DOM
- rx相關
- operators
- combineLatest
- combineAll
- concat(All, Map, *MapTo)
- 背壓(backpressure)
- js事件keycode對應表
- 裝飾器
- 有用的代碼摘錄
- 日期操作
- 數量操作
- 字符操作
- rxjs問題
- 小示例
- h5面試準備
- react
- 開發遇到的問題