Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from

Conversation

ppham27
Copy link
Contributor

@ppham27 ppham27 commented Jan 13, 2018

Closes #21513.

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] angular.io application / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #21513

What is the new behavior?

State is set before the value is emitted.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

@alexeagle alexeagle requested a review from kara January 16, 2018 15:15
@kara kara added action: review The PR is still awaiting reviews from at least one requested reviewer breaking changes labels Jan 16, 2018
Copy link
Contributor

@kara kara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, but will have to wait for a major release.

@kara kara added target: major This PR is targeted for the next major release action: merge The PR is ready for merge by the caretaker state: blocked and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Jan 16, 2018
@kara kara changed the title fix(forms): set state before emitting a value from ngModelChange DO NOT MERGE BEFORE 6 - fix(forms): set state before emitting a value from ngModelChange Jan 16, 2018
@kara
Copy link
Contributor

kara commented Jan 16, 2018

Note: we need to check Google3 to see how "breaking" this change will be, so we can figure out a merge plan.

@kara kara removed the action: merge The PR is ready for merge by the caretaker label Jan 16, 2018
@ppham27
Copy link
Contributor Author

ppham27 commented Jan 17, 2018

@kara Thanks for the quick review.

Agreed that it was confusing. The callback name ngModelChange to me implied the model had already been changed.

Good point about the previous value. I definitely overlooked that. But as you noted it's possible for the user to store the previous value. If accessing the previous value is necessary, I think I'd be in favor of more explicit semantics like having previousValue on the AbstractControl interface.

Waiting for the next major release is fine. Our team can work around it by explicitly using the FormControl instead of relying on the callback.

@kara kara self-assigned this Feb 7, 2018
@kara kara changed the title DO NOT MERGE BEFORE 6 - fix(forms): set state before emitting a value from ngModelChange fix(forms): set state before emitting a value from ngModelChange Feb 7, 2018
@kara
Copy link
Contributor

kara commented Feb 7, 2018

presubmit

@kara kara added action: merge The PR is ready for merge by the caretaker and removed state: blocked labels Feb 7, 2018
@mhevery mhevery closed this in 9744a1c Feb 7, 2018
@mhevery mhevery reopened this Feb 9, 2018
@mhevery
Copy link
Contributor

mhevery commented Feb 9, 2018

http://b/73123567 @kara (reverted as cf8d512)

mhevery added a commit that referenced this pull request Feb 9, 2018
@IgorMinar IgorMinar added this to the v6-candidates milestone Feb 9, 2018
@IgorMinar
Copy link
Contributor

good thing we didn’t merge it into a patch branch

we should discuss what to do about this PR - should we reattempt to land it + fix g3? abandon it? are there other options?

@IgorMinar
Copy link
Contributor

we should decide what to do with this - should we attempt to merge it again, fix g3 and document the breaking change? what's the impact of this on the non-google developers? at google out of all the projects only one seem to be affected.

@StephenFluin can you please help to assess? thanks

@StephenFluin
Copy link
Contributor

I believe this change seems to be worthwhile because it changes an undocumented behavior into an explicit one. Checking with @kara for any other challenges this might create for developers.

Copy link
Contributor

@kara kara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@vicb
Copy link
Contributor

vicb commented Feb 21, 2018

@kara asked the fixed cl to be merged. This PR is ready to go now.

@vicb vicb closed this in 3e6a86f Feb 22, 2018
@kara
Copy link
Contributor

kara commented Feb 22, 2018

Breaking change message (missing from commit):

Previously, ngModelChange was emitted before its underlying control was updated. This was fine if you passed through the value directly through the $event keyword, e.g.

<input [(ngModel)]="name" (ngModelChange)="onChange($event)">

onChange(value) {
console.log(value); // would log updated value
}

However, if you had a handler for the ngModelChange event that checked the value through the control, you would get the old value rather than the updated value. e.g:

<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">

onChange(ngModel: NgModel) {
console.log(ngModel.value); // would log old value, not updated value
}

Now the value and validity will be updated before the ngModelChange event is emitted, so the same setup will log the updated value.

onChange(ngModel: NgModel) {
console.log(ngModel.value); // will log updated value
}

We think this order will be less confusing when the control is checked directly. You will only need to update your app if it has relied on this bug to keep track of the old control value. If that is the case, you should be able to track the old value directly by saving it on your component.

jbogarthyde pushed a commit to jbogarthyde/angular that referenced this pull request Feb 23, 2018
jbogarthyde pushed a commit to jbogarthyde/angular that referenced this pull request Feb 23, 2018
jbogarthyde pushed a commit to jbogarthyde/angular that referenced this pull request Feb 23, 2018
@ppham27 ppham27 deleted the forms branch February 28, 2018 00:10
smdunn pushed a commit to smdunn/angular that referenced this pull request Feb 28, 2018
leo6104 pushed a commit to leo6104/angular that referenced this pull request Mar 25, 2018
leo6104 pushed a commit to leo6104/angular that referenced this pull request Mar 25, 2018
leo6104 pushed a commit to leo6104/angular that referenced this pull request Mar 25, 2018
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker area: forms breaking changes cla: yes target: major This PR is targeted for the next major release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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