Kotak 2 Sudut 2 Cara Mengikat Data

Saya cukup baru di Angular2 dan saya punya sedikit masalah:

Di Login-Komponen-HTML saya, saya memiliki dua kotak centang, yang ingin saya ikat dalam dua cara pengikatan data ke Login-Komponen-TypeScript.

Ini adalah HTML:

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

Dan ini adalah 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']);
    }

Jika saya mengklik kotak centang, saya mendapatkan nilai yang benar di controller (komponen).

Tetapi jika saya mengubah nilai misalnya saveUsernamedalam komponen, kotak centang tidak "mendapatkan" nilai baru.

Jadi saya tidak bisa memanipulasi kotak centang dari Komponen (seperti yang ingin saya lakukan di ngOnInitdalam komponen.

Terima kasih atas bantuan Anda!

Anda dapat menghapus .selecteddari saveUsernamedalam input kotak centang Anda karena saveUsername adalah boolean. Alih-alih [(ngModel)]digunakan[checked]="saveUsername" (change)="saveUsername = !saveUsername"

Edit: Solusi yang Benar:

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

Pembaruan: Seperti @newman perhatikan ketika ngModeldigunakan dalam bentuk itu tidak akan berfungsi. Namun, Anda harus menggunakan [ngModelOptions]atribut like (diuji dalam Angular 7):

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

Saya juga membuat contoh di Stackblitz: https://stackblitz.com/edit/angular-abelrm

Sayangnya solusi yang disediakan oleh @hakani tidak mengikat dua arah . Itu hanya menangani model perubahan satu arah dari bagian UI / FrontEnd.

Alih-alih sederhana:

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

akan melakukan pengikatan dua arah untuk kotak centang.

Setelah itu, ketika Model checkboxFlag diubah dari Backend atau bagian UI - voila, checkboxFlag menyimpan status kotak centang aktual.

Yang pasti saya sudah menyiapkan kode Plunker untuk menyajikan hasilnya: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

Hanya untuk melengkapi jawaban ini Anda harus memasukkan import { FormsModule } from '@angular/forms'ke app.module.tsdan tambahkan ke array impor yaitu

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

[...]

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

Saya bekerja dengan Angular5 dan saya harus menambahkan atribut "nama" untuk membuat ikatan berfungsi ... "Id" tidak diperlukan untuk mengikat.

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

Saya lebih suka sesuatu yang lebih eksplisit:

component.html

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

komponen.ts

public saveUsername:boolean;

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

Saat menggunakan <abc [(bar)]="foo"/>sintaks pada sudut.

Ini diterjemahkan menjadi: <abc [bar]="foo" (barChange)="foo = $event" />

Yang berarti komponen Anda harus memiliki:

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

Anda bisa menggunakan sesuatu seperti ini untuk mengikat data dua arah:

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

Agar kotak centang berfungsi, Anda harus mengikuti semua langkah ini:

1. impor FormsModule dalam modul Anda
2. Masukkan input ke dalam formtag

3. input Anda harus seperti ini:

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

   Catatan: jangan lupa untuk memasukkan nama dalam input Anda.

Anda harus menambahkan name="selected"atribut ke inputelemen.

Sebagai contoh:

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

Saya telah melakukan komponen kustom mencoba mengikat dua arah

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

Yang aneh adalah ini bekerja

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

sementara ini tidak akan

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

Dalam situasi apa pun, jika Anda harus mengikat nilai dengan kotak centang yang bukan boolean maka Anda dapat mencoba opsi di bawah ini

Dalam 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>

dalam komponenischeckedWithOutBoolean: any = 'Y';

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

Saya tahu ini mungkin merupakan jawaban yang berulang tetapi bagi siapa pun yang ingin memuat daftar kotak centang dengan kotak centang pilih semua ke dalam bentuk sudut, saya ikuti contoh ini: Pilih semua / hapus centang semua kotak centang menggunakan sudut 2+

itu berfungsi dengan baik tetapi hanya perlu menambahkan

[ngModelOptions]="{standalone: true}" 

HTML akhir harus seperti ini:

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

TypeScript

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

Semoga ini bisa membantu thnx

Sebuah solusi untuk mencapai hal yang sama khususnya jika Anda ingin menggunakan kotak centang dengan for loop adalah menyimpan keadaan kotak centang di dalam array dan mengubahnya berdasarkan indeks dari *ngFor loop. Dengan cara ini Anda dapat mengubah status kotak centang di komponen Anda.

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

Arahan sudut saya seperti 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">

Di p-checkbox Angular,

Gunakan semua atribut p-checkbox

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

Dan yang lebih penting, jangan lupa untuk memasukkan [ngModelOptions]="{standalone: true}dan juga MENYIMPAN HARI SAYA.

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;