feat(upgrade): propagate touched state of NgModelController

This commit is contained in:
Sergey Shevchenko 2017-07-06 20:46:20 +03:00 committed by Alex Rickabaugh
parent e03adb9edd
commit 59c23c7bd7
3 changed files with 23 additions and 0 deletions

View File

@ -90,6 +90,9 @@ export function hookupNgModel(ngModel: angular.INgModelController, component: an
if (ngModel && supportsNgModel(component)) { if (ngModel && supportsNgModel(component)) {
ngModel.$render = () => { component.writeValue(ngModel.$viewValue); }; ngModel.$render = () => { component.writeValue(ngModel.$viewValue); };
component.registerOnChange(ngModel.$setViewValue.bind(ngModel)); component.registerOnChange(ngModel.$setViewValue.bind(ngModel));
if (typeof component.registerOnTouched === 'function') {
component.registerOnTouched(ngModel.$setTouched.bind(ngModel));
}
} }
} }

View File

@ -478,9 +478,12 @@ export function main() {
class Ng2 { class Ng2 {
private _value: any = ''; private _value: any = '';
private _onChangeCallback: (_: any) => void = () => {}; private _onChangeCallback: (_: any) => void = () => {};
private _onTouchedCallback: () => void = () => {};
constructor() { ng2Instance = this; } constructor() { ng2Instance = this; }
writeValue(value: any) { this._value = value; } writeValue(value: any) { this._value = value; }
registerOnChange(fn: any) { this._onChangeCallback = fn; } registerOnChange(fn: any) { this._onChangeCallback = fn; }
registerOnTouched(fn: any) { this._onTouchedCallback = fn; }
doTouch() { this._onTouchedCallback(); }
doChange(newValue: string) { doChange(newValue: string) {
this._value = newValue; this._value = newValue;
this._onChangeCallback(newValue); this._onChangeCallback(newValue);
@ -509,6 +512,13 @@ export function main() {
expect($rootScope.modelA).toBe('C'); expect($rootScope.modelA).toBe('C');
expect(multiTrim(document.body.textContent)).toEqual('C | C'); expect(multiTrim(document.body.textContent)).toEqual('C | C');
const downgradedElement = <Element>document.body.querySelector('ng2');
expect(downgradedElement.classList.contains('ng-touched')).toBe(false);
ng2Instance.doTouch();
$rootScope.$apply();
expect(downgradedElement.classList.contains('ng-touched')).toBe(true);
ref.dispose(); ref.dispose();
}); });
})); }));

View File

@ -341,9 +341,12 @@ export function main() {
class Ng2 { class Ng2 {
private _value: any = ''; private _value: any = '';
private _onChangeCallback: (_: any) => void = () => {}; private _onChangeCallback: (_: any) => void = () => {};
private _onTouchedCallback: () => void = () => {};
constructor() { ng2Instance = this; } constructor() { ng2Instance = this; }
writeValue(value: any) { this._value = value; } writeValue(value: any) { this._value = value; }
registerOnChange(fn: any) { this._onChangeCallback = fn; } registerOnChange(fn: any) { this._onChangeCallback = fn; }
registerOnTouched(fn: any) { this._onTouchedCallback = fn; }
doTouch() { this._onTouchedCallback(); }
doChange(newValue: string) { doChange(newValue: string) {
this._value = newValue; this._value = newValue;
this._onChangeCallback(newValue); this._onChangeCallback(newValue);
@ -374,6 +377,13 @@ export function main() {
ng2Instance.doChange('C'); ng2Instance.doChange('C');
expect($rootScope.modelA).toBe('C'); expect($rootScope.modelA).toBe('C');
expect(multiTrim(document.body.textContent)).toEqual('C | C'); expect(multiTrim(document.body.textContent)).toEqual('C | C');
const downgradedElement = <Element>document.body.querySelector('ng2');
expect(downgradedElement.classList.contains('ng-touched')).toBe(false);
ng2Instance.doTouch();
$rootScope.$apply();
expect(downgradedElement.classList.contains('ng-touched')).toBe(true);
}); });
})); }));