Tenemos un formulario en una aplicación Angular 2. El formulario tiene una casilla de verificación. En algunas circunstancias, marcar la casilla de verificación es ilegal. Cuando el usuario marca la casilla de verificación, queremos mostrar un mensaje de error y desmarcar la casilla de verificación.
Esto casi funciona. En nuestro controlador de eventos, verificamos la condición, advertimos al usuario y volvemos a establecer la variable de casilla de verificación en falso. Desafortunadamente, la casilla de verificación permanece marcada.
El orden de los acontecimientos tal y como lo hemos visto es este:
checkbox de verificación se vuelve verdadera.alert por ahora)checkbox de verificación establecida en falso por nuestro código.La casilla de verificación está marcada en el navegador
El modelo ( checkbox de verificación) sigue siendo falso, pero el usuario no lo ve. ¿Cómo puedo desmarcar la casilla de verificación después de que esté realmente marcada (en lugar de 'a punto de ser marcada')?
Aquí hay un Plunkr que demuestra el problema .
Envuelva su this.checkbox=false con 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; }) } } } Puede encontrar explicaciones sobre por qué este setTimeout podría ser necesario en esta pregunta:
necesita compartir algo de código, pero según la descripción, los problemas parecen ser con ngModel para desmarcar el uso de la casilla de verificación de esta manera
<input type="checkbox" [checked]="your condition">