html - page - Enlace de datos bidireccional de casilla de verificación angular 2

title angular 6

Question

Soy bastante nuevo en Angular2 y tengo un pequeño problema:

En mi HTML de componente de inicio de sesión, tengo dos casillas de verificación, que quiero vincular de forma bidireccional el enlace de datos al Script de componente de inicio de sesión.

Este es el HTML:

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

Y este es el 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 hago clic en una casilla de verificación, obtengo el valor correcto en el controlador (componente).

Pero si cambio el valor de, por ejemplo, saveUsername en el componente, la casilla de verificación no "obtuvo" el nuevo valor.

Por lo tanto, no puedo manipular la casilla de verificación del Componente (como quiero hacer en ngOnInit en el componente.

¡Gracias por tu ayuda!

Answer 1

Cuando se usa la sintaxis <abc [(bar)]="foo"/> en angular.

Esto se traduce en: <abc [bar]="foo" (barChange)="foo = $event" />

Lo que significa que su componente debería tener:

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

Answer 2

Debe agregar el atributo name="selected" al elemento de input .

Por ejemplo:

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

Answer 3

En cualquier situación, si tiene que vincular un valor con una casilla de verificación que no es booleana, puede probar las siguientes opciones

En el archivo 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>

en el componente ischeckedWithOutBoolean: any = ''Y'';

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

Answer 4

Estoy trabajando con Angular5 y tuve que agregar el atributo "nombre" para que el enlace funcione ... No se requiere el "id" para el enlace.

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

Answer 5

He hecho un componente personalizado probado enlace bidireccional

Mi componente: <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;
}

Lo extraño es que esto funciona

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

mientras esto no

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

Answer 6

Lamentablemente, la solución proporcionada por @hakani no es un enlace bidireccional . Solo maneja el modelo de cambio unidireccional desde la parte UI / FrontEnd.

En cambio lo simple:

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

hará un enlace bidireccional para la casilla de verificación.

Posteriormente, cuando Model checkboxFlag se cambia de Backend o UI, es decir, checkboxFlag almacena el estado real de la casilla de verificación.

Para estar seguro, he preparado el código Plunker para presentar el resultado: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

Solo para completar esta respuesta, debe incluir la import { FormsModule } from ''@angular/forms'' en app.module.ts y agregar a la matriz de importaciones, es decir

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

[...]

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

Answer 7

Para que funcione la casilla de verificación, debe seguir todos estos pasos:

1. importa FormsModule en tu módulo
2. Ponga la entrada dentro de una etiqueta de form

3. su entrada debería ser así:

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

   Nota: no olvide poner nombre en su entrada.

Answer 8

Prefiero algo más explícito:

componente.html

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

componente.ts

public saveUsername:boolean;

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

Answer 9

Puede eliminar .selected de saveUsername en su casilla de verificación ya que saveUsername es un booleano. En lugar de [(ngModel)] use [checked]="saveUsername" (change)="saveUsername = !saveUsername"

Editar: Solución correcta:

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

Actualización: Al igual que @newman notó que cuando ngModel se usa de una forma no funcionará. Sin embargo, debe usar el atributo [ngModelOptions] como (probado en Angular 7):

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

También creé un ejemplo en Stackblitz: https://stackblitz.com/edit/angular-abelrm

Answer 10

Puede usar algo como esto para tener un enlace de datos bidireccional:

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