กล่องกาเครื่องหมาย Angular 2 การผูกข้อมูลแบบสองทาง

ฉันค่อนข้างใหม่กับ Angular2 และฉันมีปัญหาเล็กน้อย:

ใน Login-Component-HTML ของฉันฉันมีช่องทำเครื่องหมายสองช่องซึ่งฉันต้องการผูกข้อมูลสองทางเข้ากับ Login-Component-TypeScript

นี่คือ HTML:

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

และนี่คือ 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']);
    }

หากฉันคลิกช่องทำเครื่องหมายฉันจะได้รับค่าที่ถูกต้องในคอนโทรลเลอร์ (ส่วนประกอบ)

แต่ถ้าฉันเปลี่ยนค่าตัวอย่างsaveUsernameในองค์ประกอบช่องทำเครื่องหมายไม่ได้ "รับ" ค่าใหม่

ดังนั้นฉันไม่สามารถจัดการช่องทำเครื่องหมายจากส่วนประกอบ (เช่นฉันต้องการที่จะทำในngOnInitในองค์ประกอบ

ขอบคุณสำหรับความช่วยเหลือของคุณ!

คุณสามารถลบออก.selectedจากsaveUsernameในช่องทำเครื่องหมายของคุณเนื่องจาก saveUsername เป็นบูลีน แทนที่จะ[(ngModel)]ใช้[checked]="saveUsername" (change)="saveUsername = !saveUsername"

แก้ไข: โซลูชันที่ถูกต้อง:

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

อัปเดต:เช่นเดียวกับ @newman สังเกตเห็นว่าngModelมีการใช้งานในรูปแบบใดจะไม่ทำงาน อย่างไรก็ตามคุณควรใช้[ngModelOptions]คุณลักษณะเช่น (ทดสอบใน Angular 7):

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

ฉันยังสร้างตัวอย่างที่ Stackblitz: https://stackblitz.com/edit/angular-abelrm

น่าเสียดายที่โซลูชั่นของ @hakani ไม่ได้เป็นเช่นนั้น สองทางที่มีผลผูกพัน มันจัดการรูปแบบการเปลี่ยนทางเดียวจาก UI / FrontEnd ส่วนหนึ่ง

ง่าย ๆ แทน:

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

จะทำการผูกสองทางสำหรับช่องทำเครื่องหมาย

หลังจากนั้นเมื่อ Model checkboxFlagเปลี่ยนจาก Backend หรือส่วน UI - voila, checkboxFlag จะเก็บสถานะช่องทำเครื่องหมายจริง

เพื่อให้แน่ใจว่าฉันได้เตรียมรหัส Plunker เพื่อแสดงผลลัพธ์: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

เพียงทำคำตอบนี้ให้สมบูรณ์คุณควรรวมimport { FormsModule } from '@angular/forms'เข้าไปในapp.module.tsและเพิ่มในการนำเข้าอาร์เรย์เช่น

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

[...]

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

ฉันทำงานกับ Angular5 และฉันต้องเพิ่มแอตทริบิวต์ "ชื่อ" เพื่อให้ได้ผลผูกพันในการทำงาน ... ไม่จำเป็นต้องใช้ "id" ในการผูก

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

ฉันชอบบางสิ่งที่ชัดเจนกว่า:

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

เมื่อใช้<abc [(bar)]="foo"/>ไวยากรณ์กับมุม

สิ่งนี้แปลเป็น: <abc [bar]="foo" (barChange)="foo = $event" />

ซึ่งหมายความว่าองค์ประกอบของคุณควรมี:

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

คุณสามารถใช้สิ่งนี้เพื่อผูกข้อมูลสองทาง:

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

ในการรับช่องทำเครื่องหมายคุณควรทำตามขั้นตอนเหล่านี้ทั้งหมด:

1. นำเข้า FormsModule ในโมดูลของคุณ
2. ใส่อินพุตภายในformแท็ก

3. ข้อมูลที่คุณป้อนควรเป็นดังนี้:

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

   หมายเหตุ: อย่าลืมใส่ชื่อในข้อมูลของคุณ

คุณต้องเพิ่มname="selected"คุณสมบัติให้กับinputองค์ประกอบ

ตัวอย่างเช่น:

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

ฉันได้ทำชิ้นส่วนที่กำหนดเองแล้วลองผูกสองทาง

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

สิ่งนี้เป็นงานที่แปลก

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

ในขณะนี้จะไม่

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

ในทุกสถานการณ์หากคุณต้องผูกค่าด้วยช่องทำเครื่องหมายที่ไม่ได้บูลีนคุณสามารถลองตัวเลือกด้านล่าง

ในไฟล์ 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>

ในองค์ประกอบischeckedWithOutBoolean: any = 'Y';

ดูใน stackblitz https://stackblitz.com/edit/angular-5szclb?embed=1&file=src/app/app/app.component.html

ฉันรู้ว่ามันอาจจะตอบซ้ำ แต่สำหรับคนใดคนหนึ่งที่ต้องการโหลดรายการช่องทำเครื่องหมายกับ selectall ช่องทำเครื่องหมายในรูปแบบเชิงมุมฉันทำตามตัวอย่างนี้: เลือกทั้งหมด / ยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดโดยใช้เชิงมุม 2+

มันทำงานได้ดี แต่ต้องเพิ่ม

[ngModelOptions]="{standalone: true}" 

HTMLสุดท้ายควรเป็นดังนี้:

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

สิ่งที่พิมพ์ด้วยพิมพ์ดีด

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

หวังว่านี่จะช่วยได้

วิธีแก้ปัญหาเพื่อให้ได้ผลเหมือนกันเป็นพิเศษหากคุณต้องการใช้ช่องทำเครื่องหมายด้วย for loop คือการจัดเก็บสถานะของช่องทำเครื่องหมายภายในอาร์เรย์และเปลี่ยนตามดัชนีของ *ngForลูป วิธีนี้คุณสามารถเปลี่ยนสถานะของช่องทำเครื่องหมายในองค์ประกอบของคุณ

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

คำสั่งเชิงมุมของฉันเหมือนกับ 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">

ในช่องทำเครื่องหมาย p-Angular

ใช้คุณลักษณะทั้งหมดของ p-checkbox

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

และที่สำคัญอย่าลืมที่จะรวมไว้[ngModelOptions]="{standalone: true}เช่นเดียวกับที่ได้บันทึกวันของฉัน

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

ไฟล์. html

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

ไฟล์. ts

userConsent: boolean = false;