Angular 2 Флажок Двусторонняя привязка данных

Ответ 1

Вы можете удалить .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

Ответ 2

К сожалению, решение, предоставленное @hakani, не является двусторонним связыванием. Он просто обрабатывает одностороннюю меняющуюся модель из части UI/FrontEnd.

Вместо этого просто:

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

будет выполнять двустороннюю привязку для флажка.

Впоследствии, когда Model checkboxFlag изменен с Backend или части пользовательского интерфейса - voila, checkboxFlag сохраняет фактическое состояние флажка.

Конечно, я подготовил код Plunker, чтобы представить результат: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

Чтобы завершить этот ответ, вы должны включить import { FormsModule } from '@angular/forms' в app.module.ts и добавить в массив импорта, т. app.module.ts

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

[...]

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

Ответ 3

Я работаю с Angular5, и мне пришлось добавить атрибут "name", чтобы привязка работала... "id" не требуется для привязки.

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

Ответ 4

Я предпочитаю что-то более явное:

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

Ответ 5

При использовании синтаксиса <abc [(bar)]="foo"/> на angular.

Это означает:  <abc [bar]="foo" (barChange)="foo = $event" />

Это означает, что ваш компонент должен иметь:

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

Ответ 6

Вы можете просто использовать что-то вроде этого для двухстороннего связывания данных:

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

Ответ 7

Чтобы выполнить checkbox, вы должны выполнить следующие шаги:

• import FormsModule в вашем модуле
• Поместите ввод внутри тега form

• ваш вход должен выглядеть следующим образом:

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

  Примечание. Не забудьте указать имя на своем входе.

Ответ 8

Я выполнил специальный компонент, попробованный двумя способами привязки

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

в то время как этот wont

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

Ответ 9

Вы должны добавить атрибут name="selected" к элементу input.

Например:

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

Ответ 10

В любой ситуации, если вам нужно связать значение с флажком, который не является логическим, то вы можете попробовать следующие варианты

В 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';

Смотрите в стеке https://stackblitz.com/edit/angular-5szclb?embed=1&file=src/app/app.component.html

Ответ 11

Обходной путь для достижения того же самого, особенно если вы хотите использовать флажок с циклом for, состоит в том, чтобы сохранить состояние флажка внутри массива и изменить его на основе индекса цикла *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;
    }
  }

Ответ 12

Моя угловая директива, такая как 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">