각도 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에서 saveUsernamesaveUsername 부울이기 때문에 당신의 체크 박스를 입력한다. [(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"/>

확인란에 양방향 바인딩을 수행합니다.

그 후, 모델 checkboxFlag 가 백엔드 또는 UI 부분-voila에서 변경되면 checkboxFlag는 실제 확인란 상태를 저장합니다.

결과를 표시하기 위해 Plunker 코드를 준비했는지 확인하려면 https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

이 답변을 완료하려면 import { FormsModule } from '@angular/forms'into를 포함하고 app.module.tsimports 배열에 추가 해야합니다.

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

[...]

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

Angular5로 작업하고 있으며 바인딩을 작동 시키려면 "name"속성을 추가해야했습니다. "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>

사용자 정의 구성 요소를 양방향 바인딩을 시도했습니다.

내 구성 요소 : <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.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>

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

이 thnx 도움이되기를 바랍니다

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

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- 확인란에서

p- 확인란의 모든 속성 사용

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