Angular 2 체크박스 양방향 데이터 바인딩

이 Angular 기사에서는 확인란 양방향 데이터 바인딩을 수행하는 다양한 방법을 살펴봅니다.

양방향 데이터 바인딩에 ngModelOptions 속성을 사용합니다. 이 솔루션은 name 속성이 있을 때 가장 잘 작동합니다.

또한 checkboxFlag가 변경될 때 실제 체크박스 상태를 저장할 수 있도록 하는 ngModel 속성을 도입할 것입니다. 그런 다음 구성 요소의 값이 변경되면 확인란도 새 값을 가져오도록 데이터 바인딩에 change 속성을 사용합니다.

양식에서 ngModel을 사용하면 대부분 작동하지 않으므로 ngModelOptions 속성은 구성 요소의 데이터가 변경될 때 확인란 값이 변경되도록 하는 데 가장 적합합니다.

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

어떤 경우에는 입력이 양식 내부가 아니라 ngFor 루프의 일부를 형성하는 경우 코드가 작동하지 않습니다. 또한 코드가 제대로 작동하려면 name 속성이 코드 설정에 포함되어야 합니다.

위의 예제 코드는 프론트엔드 부분에서 양방향 데이터 바인딩을 처리하지만 이 솔루션은 ngModel을 적절하게 사용하여 백엔드에서 변경을 수행합니다.

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

이 코드가 완벽하게 작동하도록 하려면 @angular/forms에서 app.module.ts로 { FormsModule }을 가져오고 다음과 같이 가져오기 배열에 추가합니다.

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

[...]

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

name 속성은 기본 확인 상태가 예상대로 작동하도록 고유해야 하며 input 태그 안에 있어야 합니다. 그러나 다음과 같이 객체 배열을 반복하면서 ngFor 내부의 확인란을 사용하면 이 코드가 작동하지 않습니다.

[{"checked":true},{"checked":false}]

그런 다음 change 속성을 사용하여 확인란에 대한 데이터 바인딩을 만들 수도 있습니다. 이 접근 방식을 사용하여 보다 자세한 방식으로 코드를 생성합니다.

html 구성 요소는 다음과 같습니다.

<input #saveCheckboxOne
	id="saveCheckboxOne"
	type="checkbox"
	[checked]="saveCheckbox"
	(change)="onSaveCheckboxChange(saveUserNameCheckBox.checked)" />

그러면 component.js가 아래와 같이 작성됩니다.

public saveCheckbox:boolean;

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