Casella di controllo Angolare 2 Binding dati bidirezionale

Sono abbastanza nuovo su Angular2 e ho un piccolo problema:

Nel mio Login-Component-HTML, ho due caselle di controllo, che voglio associare in modo bidirezionale ai dati di Login-Component-TypeScript.

Questo è l'HTML:

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

E questo è il 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']);
    }

Se faccio clic su una casella di controllo, ottengo il valore corretto nel controller (componente).

Ma se cambio il valore, ad esempio, saveUsernamenel componente, la casella di controllo non "ottiene" il nuovo valore.

Quindi non posso manipolare la casella di controllo dal Componente (come voglio fare nel ngOnInitnel componente.

Grazie per l'aiuto!

Puoi rimuovere .selectedda saveUsernamenella casella di controllo in quanto saveUsername è un valore booleano. Invece di [(ngModel)]usare[checked]="saveUsername" (change)="saveUsername = !saveUsername"

Modifica: soluzione corretta:

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

Aggiornamento: come notato da @newman quando ngModelviene utilizzato in un modulo, non funzionerà. Tuttavia, dovresti usare l' [ngModelOptions]attributo like (testato in Angular 7):

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

Ho anche creato un esempio su Stackblitz: https://stackblitz.com/edit/angular-abelrm

Sfortunatamente la soluzione fornita da @hakani non è vincolante a due vie . Gestisce solo il modello che cambia unidirezionale dalla parte UI / FrontEnd.

Invece il semplice:

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

eseguirà l'associazione bidirezionale per la casella di controllo.

Successivamente, quando Model checkboxFlag viene modificato dalla parte Backend o UI - voilà, checkboxFlag memorizza lo stato attuale della casella di controllo.

Per essere sicuro di aver preparato il codice Plunker per presentare il risultato: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

Solo per completare questa risposta dovresti includere l' array import { FormsModule } from '@angular/forms'in app.module.tse aggiungere ad Import, ad es

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

[...]

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

Sto lavorando con Angular5 e ho dovuto aggiungere l'attributo "name" per far funzionare il binding ... "id" non è richiesto per il binding.

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

Preferisco qualcosa di più esplicito:

component.html

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

component.ts

public saveUsername:boolean;

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

Quando si utilizza la <abc [(bar)]="foo"/>sintassi su angolare.

Questo si traduce in: <abc [bar]="foo" (barChange)="foo = $event" />

Ciò significa che il componente dovrebbe avere:

@Input() bar;
@Output() barChange = new EventEmitter();

Puoi semplicemente usare qualcosa del genere per avere un'associazione dati bidirezionale:

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

Per far funzionare la casella di controllo è necessario seguire tutti questi passaggi:

1. importare FormsModule nel tuo modulo
2. Inserisci l'input all'interno di un formtag

3. il tuo contributo dovrebbe essere così:

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

   Nota: non dimenticare di inserire il nome nel tuo input.

Devi aggiungere l' name="selected"attributo inputall'elemento.

Per esempio:

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

Ho fatto un componente personalizzato provato a legare in due modi

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

cosa strana è che funziona

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

mentre questo non lo farà

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

In ogni caso, se devi associare un valore a una casella di controllo non booleana, puoi provare le opzioni seguenti

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

nel componenteischeckedWithOutBoolean: any = 'Y';

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

So che può essere una risposta ripetuta ma per chiunque voglia caricare l'elenco di caselle di controllo con la casella di controllo selectall in forma angolare, seguo questo esempio: Seleziona tutto / deseleziona tutto la casella di controllo utilizzando angolare 2+

funziona benissimo ma devo solo aggiungere

[ngModelOptions]="{standalone: true}" 

l' HTML finale dovrebbe essere così:

<ul>
    <li><input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/></li>
    <li *ngFor="let n of names">
    <input type="checkbox" [(ngModel)]="n.selected" (change)="checkIfAllSelected();">{{n.name}}
    </li>
  </ul>

Dattiloscritto

  selectAll() {
    for (var i = 0; i < this.names.length; i++) {
      this.names[i].selected = this.selectedAll;
    }
  }
  checkIfAllSelected() {
    this.selectedAll = this.names.every(function(item:any) {
        return item.selected == true;
      })
  }

spero che questo aiuto grazie

Una soluzione alternativa per ottenere lo stesso specialmente se si desidera utilizzare la casella di controllo con for loop consiste nel memorizzare lo stato della casella di controllo in un array e modificarlo in base all'indice del *ngForloop. In questo modo è possibile modificare lo stato della casella di controllo nel componente.

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

La mia direttiva angolare come 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">

Nella casella di controllo Angolare p,

Usa tutti gli attributi di p-checkbox

<p-checkbox name="checkbox" value="isAC" 
    label="All Colors" [(ngModel)]="selectedAllColors" 
    [ngModelOptions]="{standalone: true}" id="al" 
    binary="true">
</p-checkbox>

E, soprattutto, non dimenticare di includere [ngModelOptions]="{standalone: true}oltre a SALVATO IL MIO GIORNO.

Angular: "9.0.0"
Angular CLI: 9.0.1
Node: 13.10.1
OS: linux x64

file .html

<input [(ngModel)]="userConsent" id="userConsent" required type="checkbox"/> " I Accept"

file .ts

userConsent: boolean = false;