angular html原理,Angular 4.x ngModel 双向绑定原理揭秘
在 Angular 4.x 中对于使用 Template-Driven 表单场景，如果需要实现表单数据绑定。我们就需要引入 ngModel 指令。该指令用于基于 domain 模型，创建 FormControl 实例，并将创建的实例绑定到表单控件元素上。
ngModel 使用示例
ngModel
app.component.ts
@Component({
selector: 'exe-app',
template: `
Name:
{{ f.value | json }}
`,
})
export class AppComponent implements OnInit { }
在
表单中使用 ngModel 时，我们需要设置一个 name 属性，以便该控件可以使用该名称在表单中进行注册。单向绑定 - [ngModel]
app.component.ts
@Component({
selector: 'exe-app',
template: `
Name:
{{ user | json }}
`,
})
export class AppComponent implements OnInit {
user: { username: string };
ngOnInit() {
this.user = { username: 'Semlinker' };
}
}
双向绑定 - [(ngModel)]
表单中应用
app.component.ts
@Component({
selector: 'exe-app',
template: `
Name:
{{ user | json }}
`,
})
export class AppComponent implements OnInit {
user: { username: string };
ngOnInit() {
this.user = { username: 'Semlinker' };
}
}
单独应用
import { Component } from '@angular/core';
@Component({
selector: 'exe-app',
template: `
{{username}}
`,
})
export class AppComponent {
username: string;
}
ngModelOptions - [ngModelOptions]
当你在使用 ngModel 时未设置 name 属性，如下所示：
Name:
当你运行时，浏览器控制台将会抛出以下异常信息：
Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
以上异常信息告诉我们，如果在表单标签中使用 ngModel，则必须设置 name 属性，或者在 ngModelOptions 中必须将表单控件定义为 "standalone"。依据上述异常信息，我们做如下调整：
Name:
[ngModelOptions]="{standalone: true}">
接下来我们看一下 ngModelOptions 支持的对象类型：
@Input('ngModelOptions') options: {name?: string, standalone?: boolean};
禁用控件 - disabled
Name:
[(ngModel)]="user.username" disabled="true">
监听 ngModelChange 事件 - (ngModelChange)
app.component.ts
@Component({
selector: 'exe-app',
template: `
Name:
[(ngModel)]="user.username">
{{ user | json }}
`,
})
export class AppComponent implements OnInit {
user: { username: string };
ngOnInit() {
this.user = { username: 'Semlinker' };
}
userNameChange(name: string) {
console.log(name);
}
}
获取关联的 NgModel 对象
app.component.ts
@Component({
selector: 'exe-app',
template: `
Name:
[(ngModel)]="user.username">
{{ userName.control | json }}
`,
})
export class AppComponent implements OnInit {
user: { username: string };
ngOnInit() {
this.user = { username: 'Semlinker' };
}
}
通过使用 userName="ngModel" 方式，我们可以获取表单控件关联的 NgModel 对象，进而获取控件当前控件的相关信息，如控件的当前的状态或控件验证信息等。
完整示例
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'exe-app',
template: `
Submit
First name value: {{ first.value }}
First name valid: {{ first.valid }}
Form value: {{ f.value | json }}
Form valid: {{ f.valid }}
`,
})
export class AppComponent {
onSubmit(f: NgForm) {
console.log(f.value); // { first: '', last: '' }
console.log(f.valid); // false
}
}
ngModel 指令详解
ngModel 指令定义
@Directive({
selector: '[ngModel]:not([formControlName]):not([formControl])',
providers: [formControlBinding],
exportAs: 'ngModel'
})
formControlBinding 定义
export const formControlBinding: any = {
provide: NgControl,
useExisting: forwardRef(() => NgModel)
};
相关说明
selector 中 [ngModel]:not([formControlName]):not([formControl]) 表示该指令只应用于 Template-Driven 表单中。
exportAs - 表示可以使用 first="ngModel" 语法获取 NgModel 对象
ngModel 指令输入与输出属性
输入属性
@Input() name: string;
@Input('disabled') isDisabled: boolean;
@Input('ngModel') model: any;
@Input('ngModelOptions') options: {name?: string, standalone?: boolean};
输出属性
@Output('ngModelChange') update = new EventEmitter();
NgModel 类
// angular2/packages/forms/src/directives/ng_model.ts
export class NgModel extends NgControl implements OnChanges,
OnDestroy {
/** @internal */
_control = new FormControl(); // 创建FormControl对象
/** @internal */
_registered = false; // 用于标识控件是否已注册
viewModel: any; // 用于保存前一次model的值
...
}
NgModel 构造函数
constructor(
@Optional() @Host() parent: ControlContainer,
@Optional() @Self() @Inject(NG_VALIDATORS) validators: Array,
@Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
Array,
@Optional() @Self() @Inject(NG_VALUE_ACCESSOR)
valueAccessors: ControlValueAccessor[]) {
super();
this._parent = parent;
this._rawValidators = validators || [];
this._rawAsyncValidators = asyncValidators || [];
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
相关说明
@Optional() - 表示该依赖对象是可选的
@Host() - 表示从宿主元素注入器获取依赖对象
@Self() - 表示从当前注入器获取依赖对象
@Inject() - 用于注入 Token (new InjectionToken) 对应的非 Type 类型依赖对象
构造函数执行的操作：
获取 ControlContainer (控件容器)对象
获取控件上的同步验证器
获取控件上的异步验证器
获取控件上的 ControlValueAccessor
NgModel 生命周期钩子
ngOnChanges
ngOnChanges(changes: SimpleChanges) {
this._checkForErrors();
if (!this._registered) this._setUpControl();
if ('isDisabled' in changes) {
this._updateDisabled(changes);
}
if (isPropertyUpdated(changes, this.viewModel)) {
this._updateValue(this.model);
this.viewModel = this.model;
}
}
_checkForErrors()
private _checkForErrors(): void {
if (!this._isStandalone()) {
this._checkParentType();
}
this._checkName();
}
// 判断是否设置standalone属性
private _isStandalone(): boolean {
return !this._parent || (this.options && this.options.standalone);
}
/**
* 1.ngModel指令不能与formGroupName或formArrayName指令一起使用，需改用
* formControlName或调整ngModel的父控件使用的指令为ngModelGroup。
*
* 2.ngModel不能被注册到使用formGroup指令的表单中，需改用formControlName或设置
* ngModelOptions对象中的standalone属性，避免注册该控件。
*/
private _checkParentType(): void {
if (!(this._parent instanceof NgModelGroup) &&
this._parent instanceof AbstractFormGroupDirective) {
TemplateDrivenErrors.formGroupNameException();
} else if (!(this._parent instanceof NgModelGroup) &&
!(this._parent instanceof NgForm)) {
TemplateDrivenErrors.modelParentException();
}
}
/**
* 验证是否设置name属性
*
* 如果在表单标签中使用 ngModel，则必须设置 name 属性，或者在ngModelOptions中必须将
* 表单控件定义为"standalone"。
*
*
* true}">
*/
private _checkName(): void {
if (this.options && this.options.name) this.name = this.options.name;
if (!this._isStandalone() && !this.name) {
TemplateDrivenErrors.missingNameException();
}
}
_setUpControl()
// 初始化控件
private _setUpControl(): void {
this._isStandalone() ? this._setUpStandalone() :
// 在ControlContainer所属的form中注册该控件
this.formDirective.addControl(this);
this._registered = true; // 标识已注册
}
// 若设置standalone属性，则初始化该控件，并更新控件的值和验证状态
private _setUpStandalone(): void {
setUpControl(this._control, this);
this._control.updateValueAndValidity({emitEvent: false});
}
// 获取ControlContainer所属的form
get formDirective(): any {
return this._parent ? this._parent.formDirective : null;
}
_updateDisabled()
若设置 isDisabled 输入属性，则更新控件的 disabled 属性：
// 更新控件的disabled状态
private _updateDisabled(changes: SimpleChanges) {
// 获取disabled输入属性的当前值
const disabledValue = changes['isDisabled'].currentValue;
// 判断是否设置为disabled
const isDisabled = disabledValue === '' ||
(disabledValue && disabledValue !== 'false');
resolvedPromise.then(() => {
if (isDisabled && !this.control.disabled) {
this.control.disable(); // 禁用控件
} else if (!isDisabled && this.control.disabled) {
this.control.enable(); // 启用控件
}
});
}
isPropertyUpdated()
// 判断属性是否更新
export function isPropertyUpdated(changes: {[key: string]: any},
viewModel: any): boolean {
if (!changes.hasOwnProperty('model')) return false; // @Input('ngModel') model: any;
const change = changes['model'];
if (change.isFirstChange()) return true; // 判断是否首次改变
return !looseIdentical(viewModel, change.currentValue);
}
// JS has NaN !== NaN
export function looseIdentical(a: any, b: any): boolean {
return a === b || typeof a === 'number' && typeof b === 'number' && isNaN(a)
&& isNaN(b);
}
_updateValue()
// 更新控件的值
private _updateValue(value: any): void {
resolvedPromise.then(
() => { this.control.setValue(value, {emitViewToModelChange: false});
});
}
const resolvedPromise = Promise.resolve(null);
ngOnDestroy()
// 指令销毁时，从formDirective中移除该控件
ngOnDestroy(): void {
this.formDirective && this.formDirective.removeControl(this);
}
NgModel 方法
get control(): FormControl
// 获取控件
get control(): FormControl { return this._control; }
/** @internal */
_control = new FormControl();
get path(): string[]
// 获取控件的访问路径
get path(): string[] {
return this._parent ? controlPath(this.name, this._parent) : [this.name];
}
get validator(): ValidatorFn
// 获取同步验证器
get validator(): ValidatorFn {
return composeValidators(this._rawValidators);
}
export interface ValidatorFn { (c: AbstractControl): ValidationErrors|null; }
get asyncValidator(): AsyncValidatorFn
// 获取异步验证器
get asyncValidator(): AsyncValidatorFn {
return composeAsyncValidators(this._rawAsyncValidators);
}
export interface AsyncValidatorFn {
(c: AbstractControl): Promise|Observable;
}
viewToModelUpdate(newValue: any): void
// 触发ngModelChange事件
viewToModelUpdate(newValue: any): void {
this.viewModel = newValue;
// @Output('ngModelChange') update = new EventEmitter();
this.update.emit(newValue);
}
NgControl 抽象类
// angular2/packages/forms/src/directives/ng_control.ts
// 所有控件指令都需继承的基类，绑定FormControl对象至DOM元素
export abstract class NgControl extends AbstractControlDirective {
/** @internal */
_parent: ControlContainer = null;
name: string = null;
valueAccessor: ControlValueAccessor = null;
/** @internal */
_rawValidators: Array = [];
/** @internal */
_rawAsyncValidators: Array = [];
get validator(): ValidatorFn { return unimplemented(); }
get asyncValidator(): AsyncValidatorFn { return unimplemented(); }
abstract viewToModelUpdate(newValue: any): void;
}
AbstractControlDirective 抽象类
// angular2/packages/forms/src/directives/abstract_control_directive.ts
export abstract class AbstractControlDirective {
// 获取控件
get control(): AbstractControl { throw new Error('unimplemented'); }
// 获取控件的值
get value(): any { return this.control ? this.control.value : null; }
// 控件控件的验证状态 - valid、invalid、pending
get valid(): boolean { return this.control ? this.control.valid : null; }
get invalid(): boolean { return this.control ? this.control.invalid : null; }
get pending(): boolean { return this.control ? this.control.pending : null; }
get pristine(): boolean { return this.control ? this.control.pristine : null; }
get dirty(): boolean { return this.control ? this.control.dirty : null; }
get touched(): boolean { return this.control ? this.control.touched : null; }
get untouched(): boolean { return this.control ? this.control.untouched : null; }
get disabled(): boolean { return this.control ? this.control.disabled : null; }
get enabled(): boolean { return this.control ? this.control.enabled : null; }
// 获取控件验证异常对象
get errors(): ValidationErrors|null {
return this.control ? this.control.errors : null;
}
// 获取statusChanges对象
get statusChanges(): Observable {
return this.control ? this.control.statusChanges : null;
}
// 获取valueChanges对象
get valueChanges(): Observable {
return this.control ? this.control.valueChanges : null;
}
// 获取控件路径
get path(): string[] { return null; }
// 重设控件的值
reset(value: any = undefined): void {
if (this.control) this.control.reset(value);
}
// 判断是否path路径对应的控件，是否存在errorCode对应的错误
hasError(errorCode: string, path: string[] = null): boolean {
return this.control ? this.control.hasError(errorCode, path) : false;
}
// 获取path路径对应的控件，参数errorCode对应的错误
getError(errorCode: string, path: string[] = null): any {
return this.control ? this.control.getError(errorCode, path) : null;
}
}
input 指令
input 指令定义
@Directive({
selector:`
input:not([type=checkbox])[formControlName],textarea[formControlName],
input:not([type=checkbox])[formControl],textarea[formControl],
input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]
`,
host: {
'(input)': '_handleInput($event.target.value)',
'(blur)': 'onTouched()',
'(compositionstart)': '_compositionStart()',
'(compositionend)': '_compositionEnd($event.target.value)'
},
providers: [DEFAULT_VALUE_ACCESSOR]
})
相关说明
compositionstart - 事件触发于一段文字的输入之前 (类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。
compositionend - 事件触发于完成文本段落输入或取消输入
compositionstart、compositionend 的实际应用，请参考 - 应对中文输入法的字符串截断方案
DEFAULT_VALUE_ACCESSOR
export const DEFAULT_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DefaultValueAccessor),
multi: true
};
DefaultValueAccessor
export class DefaultValueAccessor implements ControlValueAccessor {
onChange = (_: any) => {};
onTouched = () => {};
/** Whether the user is creating a composition string (IME events). */
private _composing = false;
constructor(
private _renderer: Renderer, // 注入Renderer对象
private _elementRef: ElementRef,
@Optional() @Inject(COMPOSITION_BUFFER_MODE)
private _compositionMode: boolean) {
if (this._compositionMode == null) {
this._compositionMode = !_isAndroid();
}
}
// 将模型中的新值写入视图或DOM元素属性中
writeValue(value: any): void {
const normalizedValue = value == null ? '' : value;
this._renderer.setElementProperty(this._elementRef.nativeElement,
'value', normalizedValue);
}
// 设置当控件接收到change事件后，调用的函数
registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
// 设置当控件接收到touched事件后，调用的函数
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
// 设置控件的Disabled状态
setDisabledState(isDisabled: boolean): void {
this._renderer.setElementProperty(this._elementRef.nativeElement,
'disabled', isDisabled);
}
// 处理input事件
_handleInput(value: any): void {
if (!this._compositionMode || (this._compositionMode && !this._composing)) {
this.onChange(value);
}
}
// 处理compositionstart事件
_compositionStart(): void { this._composing = true; }
// 处理compositionend事件
_compositionEnd(value: any): void {
this._composing = false;
this._compositionMode && this.onChange(value);
}
}
export const COMPOSITION_BUFFER_MODE = new InjectionToken
('CompositionEventMode');
// 用于判断是否处于安卓平台，composition事件在iOS和Android存在兼容性
function _isAndroid(): boolean {
const userAgent = getDOM() ? getDOM().getUserAgent() : '';
return /android (\d+)/.test(userAgent.toLowerCase());
}
相关说明
为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异，统一了 API 接口。如定义了抽象类 Renderer 、抽象类 RootRenderer 等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。
另外看完上面的代码，不知道读者有没有以下的疑问：
writeValue() 方法什么时候调用？
registerOnChange() 什么时候调用？
registerOnTouched() 什么时候调用？
为了解开这些疑惑我们就需要分析一下，一个很重要的方法 - setUpControl()。我们先来看一下 setUpControl() 的调用的时机点：
NgModel ngOnChanges 生命周期钩子
ngOnChanges(changes: SimpleChanges) {
...
if (!this._registered) this._setUpControl();
...
}
_setUpControl() 方法
private _setUpControl(): void {
this._isStandalone() ? this._setUpStandalone() :
// 在ControlContainer所属的form中注册该控件
this.formDirective.addControl(this);
this._registered = true; // 标识已注册
}
_setUpControl() 方法内部，先判断控件有设置 standalone 属性，如果有的话，则调用 _setUpStandalone() 方法：
// 若设置standalone属性，则初始化该控件，并更新控件的值和验证状态
private _setUpStandalone(): void {
setUpControl(this._control, this); // 调用时机点一
this._control.updateValueAndValidity({emitEvent: false});
}
如果没有设置 standalone 属性，则调用 this.formDirective.addControl(this)，这个方法存在于我们的 form 指令中，我们直接看一下具体实现：
addControl(dir: NgModel): void {
resolvedPromise.then(() => {
const container = this._findContainer(dir.path);
dir._control = container.registerControl(dir.name, dir.control);
setUpControl(dir.control, dir); // 调用时机点二
dir.control.updateValueAndValidity({emitEvent: false});
});
}
搞清楚 setUpControl() 调用的时机点，是时候分析一下 setUpControl() 方法的具体实现了。
setUpControl()
// angular2/packages/forms/src/directives/shared.ts
export function setUpControl(control: FormControl, dir: NgControl): void {
if (!control) _throwError(dir, 'Cannot find control with');
/**
* NgModel构造函数
* @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]
* this.valueAccessor = selectValueAccessor(this, valueAccessors);
*/
// 判断控件是否实现ControlValueAccessor接口
if (!dir.valueAccessor) _throwError(dir, 'No value accessor for form control with');
// 组合同步验证器
control.validator = Validators.compose([control.validator, dir.validator]);
// 组合异步验证器
control.asyncValidator = Validators.composeAsync([control.asyncValidator,
dir.asyncValidator]);
// 该方法用于将模型中的新值写入视图或 DOM 属性中
dir.valueAccessor.writeValue(control.value);
// view -> model
/**
* @Directive({
* selector: 'input:not([type=checkbox])[formControlName],...',
* host: {
* '(input)': '_handleInput($event.target.value)'
* },
* providers: [DEFAULT_VALUE_ACCESSOR]
* })
* export class DefaultValueAccessor implements ControlValueAccessor {
* // 下面就是调用该方法
* registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
*
* // input事件触发后，调用该方法
* _handleInput(value: any): void {
* if (!this._compositionMode || (this._compositionMode && !this._composing)) {
* this.onChange(value); //调用下面注册的onChange函数
* }
* }
* }
*
*/
dir.valueAccessor.registerOnChange((newValue: any) => {
/**
* ngModel指令 - viewToModelUpdate() 方法
*
* viewToModelUpdate(newValue: any): void {
* this.viewModel = newValue; // 更新viewModel
* // @Output('ngModelChange') update = new EventEmitter();
* this.update.emit(newValue); // 触发ngModelChange事件
* }
*/
dir.viewToModelUpdate(newValue);
control.markAsDirty();
/*
* setValue(value: any, {onlySelf, emitEvent, emitModelToViewChange,
* emitViewToModelChange}: {
* onlySelf?: boolean,
* emitEvent?: boolean,
* emitModelToViewChange?: boolean,
* emitViewToModelChange?: boolean
* } = {}): void {
* this._value = value;
* if (this._onChange.length && emitModelToViewChange !== false) {
* this._onChange.forEach((changeFn) => changeFn(this._value,
* emitViewToModelChange !== false));
* }
* this.updateValueAndValidity({onlySelf, emitEvent});
* }
*/
control.setValue(newValue, {emitModelToViewChange: false}); // 更新控件的值
});
// touched
dir.valueAccessor.registerOnTouched(() => control.markAsTouched());
/**
* control = new FormControl();
*
* control - _onChange 属性
* _onChange: Function[] = [];
*
* control - registerOnChange() 方法
* registerOnChange(fn: Function): void { this._onChange.push(fn); }
*/
control.registerOnChange((newValue: any, emitModelEvent: boolean) => {
// control -> view
/*
* writeValue(value: any): void {
* const normalizedValue = value == null ? '' : value;
* this._renderer.setElementProperty(this._elementRef.nativeElement, 'value',
* normalizedValue);
* }
*/
dir.valueAccessor.writeValue(newValue);
// control -> ngModel
/**
* ngModel指令 - viewToModelUpdate() 方法
*
* viewToModelUpdate(newValue: any): void {
* this.viewModel = newValue; // 更新viewModel
* // @Output('ngModelChange') update = new EventEmitter();
* this.update.emit(newValue); // 触发ngModelChange事件
* }
*/
if (emitModelEvent) dir.viewToModelUpdate(newValue);
});
// 当控件状态变成 DISABLED 或从 DISABLED 状态变化成 ENABLE 状态时，会调用该函数。该函数会根据参数
// 值，启用或禁用指定的 DOM 元素
if (dir.valueAccessor.setDisabledState) {
control.registerOnDisabledChange(
(isDisabled: boolean) => { dir.valueAccessor.setDisabledState(isDisabled); });
}
// re-run validation when validator binding changes, e.g. minlength=3 -> minlength=4
dir._rawValidators.forEach((validator: Validator | ValidatorFn) => {
if ((validator).registerOnValidatorChange)
(validator).registerOnValidatorChange(() =>
control.updateValueAndValidity());
});
dir._rawAsyncValidators.forEach((validator: AsyncValidator | AsyncValidatorFn) => {
if ((validator).registerOnValidatorChange)
(validator).registerOnValidatorChange(() =>
control.updateValueAndValidity());
});
}
最后我们再看一下 ControlValueAccessor 接口：
ControlValueAccessor
// angular2/packages/forms/src/directives/control_value_accessor.ts
export interface ControlValueAccessor {
writeValue(obj: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState?(isDisabled: boolean): void;
}
writeValue(obj: any)：该方法用于将模型中的新值写入视图或 DOM 属性中
registerOnChange(fn: any)：设置当控件接收到 change 事件后，调用的函数
registerOnTouched(fn: any)：设置当控件接收到 touched 事件后，调用的函数
setDisabledState?(isDisabled: boolean)：当控件状态变成 DISABLED 或从 DISABLED 状态变化成 ENABLE 状态时，会调用该函数。该函数会根据参数值，启用或禁用指定的 DOM 元素
了解 ControlValueAccessor 的详细信息，可以参考 - Understanding ControlValueAccessor
明天补充图示说明哈，能够理解的同学请直接略过。
参考资源