fix(forms): set state before emitting a value from ngModelChange (#21514)

ppham27 · vicb · commit 3e6a86fb0a57 · 2018-02-21T15:59:33.000-08:00
Closes #21513. PR Close #21514
diff --git a/packages/forms/src/directives/shared.ts b/packages/forms/src/directives/shared.ts
@@ -99,9 +99,9 @@ function setUpBlurPipeline(control: FormControl, dir: NgControl): void {
 }
 
 function updateControl(control: FormControl, dir: NgControl): void {
-  dir.viewToModelUpdate(control._pendingValue);
   if (control._pendingDirty) control.markAsDirty();
   control.setValue(control._pendingValue, {emitModelToViewChange: false});
+  dir.viewToModelUpdate(control._pendingValue);
   control._pendingChange = false;
 }
 
diff --git a/packages/forms/test/template_integration_spec.ts b/packages/forms/test/template_integration_spec.ts
@@ -1472,6 +1472,36 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
            expect(required.nativeElement.getAttribute('pattern')).toEqual(null);
          }));
 
+      it('should update control status', fakeAsync(() => {
+           const fixture = initTest(NgModelChangeState);
+           const inputEl = fixture.debugElement.query(By.css('input'));
+           const inputNativeEl = inputEl.nativeElement;
+           const onNgModelChange = jasmine.createSpy('onNgModelChange');
+           fixture.componentInstance.onNgModelChange = onNgModelChange;
+           fixture.detectChanges();
+           tick();
+
+           expect(onNgModelChange).not.toHaveBeenCalled();
+
+           inputNativeEl.value = 'updated';
+           onNgModelChange.and.callFake((ngModel: NgModel) => {
+             expect(ngModel.invalid).toBe(true);
+             expect(ngModel.value).toBe('updated');
+           });
+           dispatchEvent(inputNativeEl, 'input');
+           expect(onNgModelChange).toHaveBeenCalled();
+           tick();
+
+           inputNativeEl.value = '333';
+           onNgModelChange.and.callFake((ngModel: NgModel) => {
+             expect(ngModel.invalid).toBe(false);
+             expect(ngModel.value).toBe('333');
+           });
+           dispatchEvent(inputNativeEl, 'input');
+           expect(onNgModelChange).toHaveBeenCalledTimes(2);
+           tick();
+         }));
+
     });
 
     describe('IME events', () => {
@@ -1809,6 +1839,17 @@ class NgModelChangesForm {
   log() { this.events.push('fired'); }
 }
 
+@Component({
+  selector: 'ng-model-change-state',
+  template: `
+    <input #ngModel="ngModel" ngModel [maxlength]="4"
+           (ngModelChange)="onNgModelChange(ngModel)">
+  `
+})
+class NgModelChangeState {
+  onNgModelChange = () => {};
+}
+
 function sortedClassList(el: HTMLElement) {
   const l = getDOM().classList(el);
   l.sort();

Original file line number	Diff line number	Diff line change
`@@ -99,9 +99,9 @@ function setUpBlurPipeline(control: FormControl, dir: NgControl): void {`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`function updateControl(control: FormControl, dir: NgControl): void {`
`102`		`- dir.viewToModelUpdate(control._pendingValue);`
`103`	`102`	`if (control._pendingDirty) control.markAsDirty();`
`104`	`103`	`control.setValue(control._pendingValue, {emitModelToViewChange: false});`
	`104`	`+ dir.viewToModelUpdate(control._pendingValue);`
`105`	`105`	`control._pendingChange = false;`
`106`	`106`	`}`
`107`	`107`