angular / angular/angular

Checkbox [ngModel] does not reflect model value when updated in (onModelChange)

Open
#13,063 9 comments 21 reactions 0 assignees View on GitHub
area: forms forms: ngModel freq1: low P4 state: confirmed type: bug/fix
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

**I'm submitting a ...** (check one with "x")
```
[x] bug report
[ ] feature request
[ ] support request
```

**Current behavior**
``````
Behaves exactly like:
``````

The checkbox only reflects the model value when it is first rendered, but then becomes functionally equivalent to a checkbox without a binding. Manually detecting changes or using `setTimeout` inside `(ngModelChange)` does not work around this issue. The same workarounds _do_ work when used with `(click)`, but voids the use of `[ngModel]`.

**Expected behavior**
The logic in `onChanges` should run, and the view should then be updated to reflect the model's current value.

**Minimal reproduction of the problem with instructions**
http://plnkr.co/edit/g9niPnLsUy6wWbzm0mHi?p=preview

**What is the motivation / use case for changing the behavior?**
`[ngModel]` should always reflect the model value.

**Please tell us about your environment:**
Mac OS X Sierra, IntelliJ IDEA

* **Angular version:**
2.2.0

* **Browser:**
all

* **Language:** [all | TypeScript X.X | ES6/7 | ES5]
TypeScript 2.0.2

Contributor guide

Open the contributing guide

Research direction

Start with the linked Plunker reproduction and the checkbox using [ngModel] with (ngModelChange), then trace how the model update reaches the view. Confirm the fix by ensuring the checkbox reflects the current model value after onChanges runs, including changes made during the handler.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.