Angulaire 2 Case Les Deux Sens De La Liaison De Données

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

Dans mon Login-Composant-HTML, j'ai deux cases à cocher, qui 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 la ngOnInit dans le composant.

Merci pour votre aide!

Consultez ici Angulaire 7 exemple de case de liaison de freakyjolly.com/...

InformationsquelleAutor Junias | 2016-10-24

250

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é, quand ngModel est utilisé dans un formulaire, ça ne marchera 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
- Si je fais cela, puis j'obtiens une erreur: Erreur: Ne peut pas attribuer à une référence ou d'une variable!
- hm,je suis déjà obtenir cette erreur: non Gérée Promesse de rejet: Ne peut pas attribuer à une référence ou d'une variable! ; Zone: <root> ; la Tâche: la Promesse.ensuite ; Valeur: Erreur: Ne peut pas attribuer à une référence ou d'une variable! Et comment la case à cocher sait, si elle doit être allumé / éteint? Dans Angulaire 1 je pourrais le faire comme ceci: $scope.loginData = {}; $scope.loginData.username = window.localStorage.getItem("username"); et cela dans le modèle: <ion-toggle ng-model="saveUsername" ng-change="toggleSaveUsername()" toggle-class="toggle-energized">Benutzername speichern</ion-toggle>
- pourriez-vous supprimer #saveUsername et essayez de nouveau. voir aussi plunker: incorporer.plnkr.co/ffkrDzon1L3ZANiuGFsp
- case à cocher sait à cause de [vérifié], vérifié va être réglé que si saveUsername == true, et (changement) des mises à jour de sa valeur à son opposé, si saveUsername est vrai ce serait !vrai qui est égale à false.
- Salut, ok, merci beaucoup à vous! Votre dernier post a été la solution! - Je modifier votre solution et le marquer comme réponse 😉 Merci!
- Pour certaines raisons, si l'entrée n'est pas à l'intérieur d'une forme, mais une partie de *ngFor boucle, [(ngModel)]="saveUsername" ne fonctionne pas, mais celui-ci fonctionne. Il doit être un bug dans angulaire?
- Cela fonctionne pour moi, alors que [(ngModel)] se comporte bizarrement. Quelqu'un peut-il m'indiquer une documentation ou une discussion sur pourquoi [vérifié] mieux que les ngModel dans le cas des cases à cocher?
- Bien que ce est la réponse, il ne fonctionne pas dans certains contextes, à moins qu'il y a un attribut "name". Apparemment, n'importe quel nom.
- lorsque ngModel est utilisé dans un formulaire, ça ne marchera pas. [ngModelOptions]="{standalone: true}" est ce dont j'avais besoin.
InformationsquelleAutor hakany
77

Malheureusement fournies par la solution de @hakani n'est pas 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"/>
```
fera 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 le import { FormsModule } from '@angular/forms' en app.module.ts et ajouter aux importations tableau, j'.e
```
import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
```
- Ne semble pas fonctionner lorsque vous utilisez la case à cocher à l'intérieur d'un ngFor, tandis que la répétition d'un tableau d'objets comme [{"checked":true},{"checked":false}]
- Je ne peux pas obtenir cette solution fonctionne, je reçois cUncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'
- Il semble que vous manque déclarer à l'importation pour FormsModule.
- à l'intérieur <input> nom de la propriété est nécessaire pour [(ngModel)] pour être utilisé
- Il va également travailler pour plusieurs cases à cocher? <input type="checkbox" [(ngModel)]="day.IsChecked" [checked]="day.IsChecked" />
- Obtenu l'erreur comme @sebnukem a remarqué. La solution dans mon cas, c'était d'ajouter FormsModule, comme dans la réponse ici stackoverflow.com/questions/38892771/...
- J'ai eu une erreur qu'il avait besoin d'un nom d'attribut. Vous pouvez lui donner un nom, ou vous pouvez utiliser [ngModelOptions]="{autonome: true}" et il va se lier.
InformationsquelleAutor Ruslan Makrenko
27

Je travaille avec Angular5 et j'ai dû ajouter l'attribut "name" pour obtenir les contraignant à travailler... La "id" est pas nécessaire pour la liaison.
```
<input type="checkbox" id="rememberMe" name="rememberMe" [(ngModel)]="rememberMe">
```
- Cette réponse a fonctionné pour moi. D'autres réponses sont également correctes. Mais avec [(ngModel)] nous n'avons pas à écrire une fonction distincte pour passer le booléen
InformationsquelleAutor Kris Kilton

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

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

InformationsquelleAutor MovGP0

5

Lors de l'utilisation de <abc [(bar)]="foo"/> de la syntaxe angulaire.

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

Ce qui signifie que votre composant doit avoir:
```
@Input() bar;
@Output() barChange = new EventEmitter();
```
- Ce doit être la accepté de répondre. Excellent
- la réponse est vraiment très court et clair, mais doit, en vertu de la une autre question
InformationsquelleAutor Jose Alberto Fernandez
4

Vous pouvez utiliser quelque chose comme cela pour deux façon de liaison de données:
```
<input type="checkbox" [checked]="model.property" (change)="model.property = !model.consent_obtained_ind">
```
InformationsquelleAutor Nuno Ferro
3

Pour obtenir case de travail, vous devez suivre ces étapes:
1. importation FormsModule dans votre module
2. Mettre l'entrée à l'intérieur d'un form tag
3. votre entrée doit être comme ceci:
```
<input name="mpf" type="checkbox" [(ngModel)]="value" />
```
  Remarque: ne pas oublier de mettre le nom de votre entrée.
InformationsquelleAutor Mahdi Shahbazi

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

Mycomponent:
<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 que cela fonctionne

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

bien que cette coutume

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

InformationsquelleAutor user1786641

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

Par exemple:

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

InformationsquelleAutor M.Shakeri

1

Dans n'importe quelle situation, si vous avez de lier une valeur à une case à cocher qui n'est pas booléenne, alors 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

InformationsquelleAutor Sabbir

Vous devez vous connecter pour publier un commentaire.