Liaison de données bidirectionnelle avec une case à cocher angulaire 2

Question

Im assez nouveau pour Angular2 et j'ai un petit problème:

Dans mon Login-Composant-HTML, j'ai deux cases à cocher, je veux lier dans les deux sens de la liaison de données pour la Connexion Composante-Tapuscrit.

C'est le HTML:

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

Et c'est le Composant.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 clique sur une case, 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 ne pas "get" la nouvelle valeur.

Donc je ne peux pas manipuler la case à cocher de la Composante (comme je veux faire dans l' ngOnInit dans le composant.

Merci pour votre aide!

Answer 1

vous pouvez supprimer .selected de saveUsername dans votre case de saisie depuis saveUsername est un booléen. au lieu de [(ngModel)] utilisation [checked]="saveUsername" (change)="saveUsername = !saveUsername"

Edit: Solution Correcte:

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

Mise à jour: Comme @newman remarqué, lors de l'utilisation de ngModel est utilisé dans un formulaire ne fonctionne pas. Cependant, vous devez utiliser [ngModelOptions] attribut comme (testé dans Angulaire 7):

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

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

Answer 2

Malheureusement, la solution fournie par @hakani n'est pas de liaison bidirectionnelle. Il a juste les poignées d'Une manière à changer de modèle de l'INTERFACE utilisateur/FrontEnd partie.

Au lieu du simple:

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

va faire la liaison bidirectionnelle pour une case à cocher.

Par la suite, lorsque le Modèle checkboxFlag est modifiée à partir du Backend ou partie de l'INTERFACE utilisateur - voilà, checkboxFlag magasins réels case à cocher état.

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

Juste pour compléter cette réponse vous devez inclure l' import { FormsModule } from '@angular/forms' en app.module.ts et ajouter aux importations tableau, j'.e

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

[...]

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

Answer 3

Je travaille avec Angular5 et je devais 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">
 

Answer 4

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

Answer 5

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