> 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
- 开发遇到的问题