web-dev-qa-db-fra.com

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

Je suis débutant dans Angular2 et dans le Web globalement, je souhaite lancer une action qui permet de modifier une valeur de paramètre d'objet dans la base de données lors de la vérification d'un checkbox et/ou la désélectionnant à l'aide de Material-Design, que j'ai essayé avec [(ngModel)] mais rien ne s'est passé. L'idée est que je dois ajouter quelques propositions avec le statut checked | unchecked pour indiquer s'il s'agit d'une proposition true ou false. Voici le modèle de proposition

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

voici le code HTML pour 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 code TypeScript pour ajouter 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 le proposition status et je veux le changer une fois que j’ai vérifié la proposition. Voici une image montrant comment on cherche à mieux comprendre le problème. enter image description here

Toute aide s'il vous plaît?

html5checkboxdata-bindingtypescriptangular
37
selem mn

PLUNKER DEMO

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

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

TS: reçoit l'événement et vérifie si la case à cocher 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();})
   }
}
86
Ankit Singh

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()" />
11
Jakob Lithner

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

5
Günter Zöchbauer

Vérifier 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>
1
Vijay Chauhan