html5 - Lanzar un evento al marcar una casilla de verificación en Angular2
onload angular 4 (4)
Puedes usar ngModel
como
<input type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="addProp($event)" data-md-icheck/>
Para actualizar el estado de la checkboxValue
de checkboxValue
actualizando la propiedad checkboxValue
en su código y cuando el usuario addProp()
la casilla de verificación, se addProp()
.
Soy novato en Angular2 y en la web a nivel mundial, deseo lanzar una acción que cambie un valor de parámetro de ojeción en la Base de datos al marcar una checkbox
o desmarcarlo usando Material-Design
, lo intenté con [(ngModel)]
pero no pasó nada . la idea es que tengo que agregar algunas proposiciones con checked | unchecked
estado checked | unchecked
para decir si es una proposición true
o false
. Aquí está el modelo de proposición
export class PropositionModel {
id:string;
wordingP:string; // the proposition
propStatus:Boolean; // the proposition status
}
aquí está el código Html para una proposición:
<div class="uk-width-xlarge-1-1 uk-width-medium-1-2">
<div (submit)="addProp1()" class="uk-input-group">
<span class="uk-input-group-addon"><input type="checkbox" data-md-icheck/></span>
<label>Proposition 1</label>
<input [(ngModel)]="proposition1.wordingP" type="text" class="md-input" required class="md-input"/>
</div>
</div>
aquí está el código de TypeScript para agregar la proposición:
addProp1() {
this.proposition1 = new PropositionModel();
this.proposition1.propStatus = false;
this.propositionService.addProposition(this.proposition1)
.subscribe(response=> {
console.log(response);
console.log(this.proposition1);
this.proposition1 = new PropositionModel();})
}
Y como pueden ver, lo convertí en false
por defecto para el proposition status
de la proposition status
y quiero cambiarlo una vez que verifiqué la proposición. Aquí hay una imagen de cómo se ve una mejor comprensión de problemas.
Cualquier ayuda por favor?
Si agrega doble paránthesis a la referencia de ngModel, obtendrá un enlace bidireccional con la propiedad de su modelo. Esa propiedad se puede leer y usar en el controlador de eventos. En mi opinión, ese es el enfoque más limpio.
<input type="checkbox" [(ngModel)]="myModel.property" (ngModelChange)="processChange()" />
Plantilla: utilice el evento de cambio para llamar a la función y pasar el evento.
<input type="checkbox" data-md-icheck (change)="addprop1($event)"/>
TS: recibe el evento y marca si la casilla de verificación está marcada antes de agregar propiedad.
addProp1(e) {
if(e.target.checked){
this.proposition1 = new PropositionModel();
this.proposition1.propStatus = false;
this.propositionService.addProposition(this.proposition1)
.subscribe(response=> {
console.log(response);
console.log(this.proposition1);
this.proposition1 = new PropositionModel();})
}
}
Ver demostración : https://stackblitz.com/edit/angular-6-checkbox?embed=1&file=src/app/app.component.html
CheckBox: use change event to call the function and pass the event.
<label class="container">
<input type="checkbox" [(ngModel)]="theCheckbox" data-md-icheck
(change)="toggleVisibility($event)"/>
Checkbox is <span *ngIf="marked">checked</span><span
*ngIf="!marked">unchecked</span>
<span class="checkmark"></span>
</label>
<div>And <b>ngModel</b> also works, it''s value is <b>{{theCheckbox}}</b></div>