We have a form in an Angular 2 app. The form has a checkbox. Under some circumstances, checking the checkbox is illegal. When the user checks the checkbox, we want to show an error message and uncheck the checkbox.
This almost works. In our event handler we check the condition, warn the user and set the checkbox variable back to false. Unfortunately, the checkbox remains checked.
The order of events as we have seen it is this:
checkbox variable becomes true.alert for now)checkbox variable set to false by our code.Checkbox is checked in the browser
The model (checkbox) remains false, but the user doesn't see it. How can I uncheck the checkbox after it is actually checked (as opposed to 'about-to-be-checked')?
Here is a Plunkr demonstrating the issue.
Wrap your this.checkbox=falsewith a setTimeout :
@Component({
selector: 'my-app',
template: `
<label>
<input type='checkbox' [(ngModel)]='checkbox' (ngModelChange)='onCheckboxChange()'> Can't be checked
</label>
<pre>{{checkbox}}</pre>
`,
})
export class App {
name:string;
checkbox: boolean;
constructor() {
this.checkbox = false;
}
onCheckboxChange() {
if (this.checkbox) {
setTimeout(()=>{
this.checkbox = false;
})
}
}
}
You can find explainations about why this setTimeoutmight be required on this question :
you need to share some code ,but as per description problems seems to be with ngModel to unchecked the checkbox use like this
<input type="checkbox" [checked]="your condition">