web-dev-qa-db-fra.com

Angular 2 Case à cocher Liaison de données bidirectionnelle

Je suis assez nouveau sur Angular2 et j’ai un petit problème:

Dans mon Login-Component-HTML, j'ai deux cases à cocher, que je veux lier dans une liaison de données bidirectionnelle à Login-Component-TypeScript.

Ceci est le HTML:

<div class="checkbox">
<label>
    <input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Save username
</label>
</div>

Et voici le Component.ts:

import { Component, OnInit }    from '@angular/core';
import { Router }               from '@angular/router';
import { Variables }            from '../../services/variables';

@Component({
    selector: 'login',
    moduleId: module.id,
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.css']
})


export class LoginComponent implements OnInit {

    private saveUsername: boolean = true;
    private autoLogin: boolean = true;
    constructor(private router: Router, private variables: Variables) { }

    ngOnInit() { 
        this.loginValid = false;
        // Get user name from local storage if you want to save

        if (window.localStorage.getItem("username") === null) {
           this.saveUsername = true;
           this.autoLogin = true;
           console.log(this.saveUsername, this.autoLogin);
        } else {
           console.log("init", window.localStorage.getItem("username"));
        }
    }

    login(username: string, password: string, saveUsername: boolean, autoLogin: boolean) {
        this.variables.setUsername(username);
        this.variables.setPassword(password);
        this.variables.setIsLoggedIn(true);
        console.log(saveUsername, autoLogin);
        //this.router.navigate(['dashboard']);
    }

Si je coche une case à cocher, j'obtiens la valeur correcte dans le contrôleur (composant).

Mais si je change la valeur de _ par exemple saveUsername dans le composant, la case à cocher n'a pas "obtenu" la nouvelle valeur.

Donc, je ne peux pas manipuler la case à cocher du composant (comme je veux le faire dans le ngOnInit du composant.

Merci de votre aide!

htmlangulartypescriptcheckboxdata-binding
152
Junias

Vous pouvez supprimer .selected de saveUsername dans votre case à cocher, car saveUsername est un booléen. Au lieu de [(ngModel)] utilisez [checked]="saveUsername" (change)="saveUsername = !saveUsername"

Edit: Solution correcte:

<input
  type="checkbox"
  [checked]="saveUsername"
  (change)="saveUsername = !saveUsername"/>

Mise à jour: Comme @newman a remarqué que lorsque ngModel est utilisé dans un formulaire, il ne fonctionnera pas. Cependant, vous devriez utiliser l'attribut [ngModelOptions] comme (testé dans Angular 7):

<input
  type="checkbox"
  [(ngModel)]="saveUsername"
  [ngModelOptions]="{standalone: true}"/> `

J'ai également créé un exemple chez Stackblitz: https://stackblitz.com/edit/angular-abelrm

267
hakany

Malheureusement, la solution fournie par @hakani n’est pas une liaison bidirectionnelle . Il gère uniquement le modèle à sens unique changeant de la partie UI/FrontEnd.

Au lieu du simple:

<input [(ngModel)]="checkboxFlag" type="checkbox"/>

fera une liaison bidirectionnelle pour la case à cocher.

Ensuite, lorsque Modèle checkboxFlag est modifié à partir de la partie Backend ou de l'interface utilisateur - voila, checkboxFlag stocke l'état actuel de la case à cocher.

Pour être sûr d'avoir préparé le code Plunker afin de présenter le résultat: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

Juste pour compléter cette réponse, vous devez inclure le import { FormsModule } from '@angular/forms' dans app.module.ts et l’ajouter au tableau d’importations i.e

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
78
Ruslan Makrenko

Je travaille avec Angular5 et j'ai dû ajouter l'attribut "name" pour que la liaison fonctionne ... L'identificateur "id" n'est pas requis pour la liaison.

<input type="checkbox" id="rememberMe" name="rememberMe" [(ngModel)]="rememberMe">
27
Kris Kilton

Je préfère quelque chose de plus explicite:

composant.html

<input #saveUserNameCheckBox
    id="saveUserNameCheckBox" 
    type="checkbox" 
    [checked]="saveUsername" 
    (change)="onSaveUsernameChanged(saveUserNameCheckBox.checked)" />

composant.ts

public saveUsername:boolean;

public onSaveUsernameChanged(value:boolean){
    this.saveUsername = value;
}
20
MovGP0

Lorsque vous utilisez la syntaxe <abc [(bar)]="foo"/> sur angular.

Cela se traduit par: <abc [bar]="foo" (barChange)="foo = $event" />

Ce qui signifie que votre composant devrait avoir:

@Input() bar;
@Output() barChange = new EventEmitter();
5
Jose Alberto Fernandez

Vous pouvez simplement utiliser quelque chose comme ceci pour avoir une liaison de données bidirectionnelle:

<input type="checkbox" [checked]="model.property" (change)="model.property = !model.consent_obtained_ind">
4
Nuno Ferro

Pour que la case à cocher fonctionne, vous devez suivre toutes ces étapes:

  1. importer FormsModule dans votre module
  2. Placez l'entrée dans une balise form

  3. votre contribution devrait être comme ceci:

    <input name="mpf" type="checkbox" [(ngModel)]="value" />

    Remarque: n'oubliez pas de mettre le nom dans votre entrée.

3
Mahdi Shahbazi

J'ai fait un composant personnalisé essayé une liaison bidirectionnelle

Mon composant: <input type="checkbox" [(ngModel)]="model" >

_model:  boolean;   

@Output() checked: EventEmitter<boolean> = new EventEmitter<boolean>();

@Input('checked')
set model(checked: boolean) {

  this._model = checked;
  this.checked.emit(this._model);
  console.log('@Input(setmodel'+checked);
}

get model() {
  return this._model;
}

chose étrange est-ce que ça marche

<mycheckbox  [checked]="isChecked" (checked)="isChecked = $event">

alors que cela ne va pas

<mycheckbox  [(checked)]="isChecked">
2
user1786641

Vous devez ajouter l'attribut name="selected" à l'élément input.

Par exemple:

<div class="checkbox">
  <label>
    <input name="selected" [(ngModel)]="saveUsername.selected" type="checkbox">Save username
  </label>
</div>
2
M.Shakeri

Dans tous les cas, si vous devez lier une valeur avec une case à cocher non booléenne, vous pouvez essayer les options ci-dessous.

Dans le fichier HTML:

<div class="checkbox">
<label for="favorite-animal">Without boolean Value</label>
<input type="checkbox" value="" [checked]="ischeckedWithOutBoolean == 'Y'" 
(change)="ischeckedWithOutBoolean = $event.target.checked ? 'Y': 'N'">
</div>

dans le composantischeckedWithOutBoolean: any = 'Y';

Voir dans le stackblitz https://stackblitz.com/edit/angular-5szclb?embed=1&file=src/app/app.component.html

1
Sabbir

Ma directive angular comme angularjs (ng-true-value ng-false-value)

@Directive({
    selector: 'input[type=checkbox][checkModel]'
})
export class checkboxDirective {
    @Input() checkModel:any;
    @Input() trueValue:any;
    @Input() falseValue:any;
    @Output() checkModelChange = new EventEmitter<any>();

    constructor(private el: ElementRef) { }

    ngOnInit() {
       this.el.nativeElement.checked = this.checkModel==this.trueValue;
    }

    @HostListener('change', ['$event']) onChange(event:any) {
        this.checkModel = event.target.checked ? this.trueValue : this.falseValue;
        this.checkModelChange.emit(this.checkModel);
    }

}

html

<input type="checkbox" [(checkModel)]="check" [trueValue]="1" [falseValue]="0">
0
Edgardo Rivera

Une solution de contournement pour obtenir le même résultat, spécialement si vous souhaitez utiliser une case à cocher avec une boucle for, consiste à stocker son état dans un tableau et à le modifier en fonction de l'index de la boucle *ngFor. De cette façon, vous pouvez changer l'état de la case à cocher dans votre composant.

app.component.html

<div *ngFor="let item of items; index as i"> <input type="checkbox" [checked]="category[i]" (change)="checkChange(i)"> {{item.name}} </div>

app.component.ts

items = [
    {'name':'salad'},
    {'name':'juice'},
    {'name':'dessert'},
    {'name':'combo'}
  ];

  category= []

  checkChange(i){
    if (this.category[i]){  
      this.category[i] = !this.category[i];
    }
    else{
      this.category[i] = true;
    }
  }
0
Sid