bug(forms): Value and status are out of sync in ngModelChange callback

[ppham27]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Within the ngModelChange callback, the form validity doesn't reflect the control status. For example, if the value fails validation, the form control will still have VALID status.

Expected behavior

If the value fails validation, I would expect INVALID status.

Minimal reproduction of the problem with instructions

Consider the component:

<input #ngModel="ngModel" ngModel [maxlength]="4"
       (ngModelChange)="onNgModelChange(ngModel)">

where onNgModelChange is defined:

class MyComponent {
  onNgModelChange(ngModel: NgModel) {
    console.log(ngModel.value);
    console.log(ngModel.status);
  }
}

If you the value goes from valid to invalid, VALID will be logged despite value being INVALID. When using async validators, one would expect PENDING to be logged, but the previous status is logged instead.

See #21514 for a test case.

What is the motivation / use case for changing the behavior?

I would like to filter out invalid values in the callback. As an aside, this was easier in AngularJS, where one could set allowInvalid to falsein ngModelOptions.

Environment

Angular version: 5.2.0


Browser:
- [x] Chrome (desktop) version 64
- [x] Chrome (Android) version XX
- [x] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [x] Safari (iOS) version XX
- [x] IE version XX
- [x] Edge version XX
 
For Tooling issues:
- Node version: 8.9.4  
- Platform:  Mac, Linux, Windows

Others:

[kara]

I'm a bit torn on this one. It's already possible to get the updated value by passing $event rather than exporting and passing through ngModel (e.g. (ngModelChange)="onChange($event)"). And I could see people using the ngModel.value pattern to check the old value, so I'm concerned we may be removing functionality for those folks if we "fix" this.

That said, at the end of the day, it's confusing behavior - esp when it comes to stale control status - and it's possible for people to save their own copy of the old value. So I'm thinking we should make the change and ensure we mark it as "breaking".

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}