Lancer un événement en cochant une case dans Angular2

Question

Je suis débutant dans la Angular2 et dans le web à l'échelle mondiale , je veux lancer une action qui change l'oject paramater valeur dans la Base de données lors de la vérification d'un checkbox et ou de la désactivation de l'aide d' Material-Design, j'ai essayé avec [(ngModel)] mais rien ne s'est passé. l'idée c'est que je dois ajouter quelques propositions avec checked | unchecked statut de dire si c'est un true ou false proposition. Voici la proposition de modèle

    export class PropositionModel {
        id:string;
        wordingP:string; // the proposition
        propStatus:Boolean; // the proposition status
}

voici le code Html d'une proposition :

<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>

voici le texte dactylographié de code pour l'ajout de la proposition:

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();})
    }

Et comme vous pouvez le voir j'ai fait un false par défaut pour l' proposition status et je veux le changer une fois que j'ai vérifié la proposition. Voici une image de la façon dont il semble, pour une meilleure compréhension du problème.

Toute aide, s'il vous Plaît ?

Answer 1

DÉMO DE PLUNKER

Modèle: utilisez change event pour appeler la fonction et le transmettre.

 <input type="checkbox"  data-md-icheck (change)="addprop1($event)"/>
 

TS: recevoir l'événement et vérifier si la case est cochée avant d'ajouter la propriété.

 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();})
   }
}
 

Answer 2

Si vous ajoutez une double parenthèse à la référence ngModel, vous obtenez une liaison bidirectionnelle à votre propriété de modèle. Cette propriété peut ensuite être lue et utilisée dans le gestionnaire d'événements. À mon avis, c'est l'approche la plus propre.

 <input type="checkbox" [(ngModel)]="myModel.property" (ngModelChange)="processChange()" />
 

Answer 3

Vous pouvez utiliser ngModel comme

 <input type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="addProp($event)" data-md-icheck/>
 

Pour mettre à jour l'état de la case à cocher en mettant à jour la propriété checkboxValue dans votre code et lorsque la case à cocher est modifiée par l'utilisateur, addProp() est appelé.

Answer 4

Vérifiez la démo : 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>