Angular 5 でチェックボックスを自在に操る！HTMLテンプレートとTypeScriptでブール値を制御する方法
Angular 5 で HTML テンプレートと TypeScript でチェックボックスのブール値を制御する方法
ngModel ディレクティブは、フォーム要素とコンポーネントのプロパティを双方向にバインドするために使用されます。チェックボックスの場合、ngModel を使って、チェックボックスの状態をブール値のプロパティにバインドすることができます。
例
<input type="checkbox" [(ngModel)]="isChecked">
isChecked: boolean = false;
上記の例では、isChecked というプロパティが定義されています。このプロパティは、チェックボックスがチェックされているかどうかを表すブール値です。ngModel ディレクティブによって、チェックボックスの状態が isChecked プロパティに双方向にバインドされます。つまり、チェックボックスがチェックされると isChecked は true になり、チェックボックスが非チェックされると isChecked は false になります。
イベントを使う
チェックボックスの状態を制御するもう 1 つの方法は、イベントを使うことです。チェックボックスがクリックされたときに発生する change イベントを処理することで、チェックボックスの状態をブール値のプロパティに更新することができます。
<input type="checkbox" (change)="onChange($event)">
onChange(event) {
this.isChecked = event.target.checked;
}
isChecked: boolean = false;
上記の例では、onChange というメソッドが定義されています。このメソッドは、チェックボックスがクリックされたときに呼び出されます。onChange メソッドの中では、event.target.checked プロパティを使って、チェックボックスの状態を取得し、isChecked プロパティに更新しています。
- ngModel を使うと、チェックボックスの状態を簡単にバインドすることができます。
- イベントを使うと、よりきめ細かい制御が可能になります。
一般的には、シンプルな場合は ngModel を使うのがおすすめです。一方、チェックボックスの状態に基づいて複雑な処理を行う必要がある場合は、イベントを使う方が適している場合があります。
補足
- チェックボックスが初期状態でチェックされているようにするには、
checked属性にtrueを設定します。
<input type="checkbox" checked [(ngModel)]="isChecked">
- チェックボックスが無効になっているようにするには、
disabled属性を設定します。
<input type="checkbox" disabled [(ngModel)]="isChecked">
Angular 5 で HTML テンプレートと TypeScript でチェックボックスのブール値を制御する - サンプルコード
ngModel を使う
HTML テンプレート
<input type="checkbox" [(ngModel)]="isChecked" name="myCheckbox">
<label for="myCheckbox">チェックボックス</label>
TypeScript コンポーネント
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyComponent {
isChecked: boolean = false;
}
<input type="checkbox" (change)="onChange($event)" name="myCheckbox">
<label for="myCheckbox">チェックボックス</label>
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyComponent {
isChecked: boolean = false;
onChange(event) {
this.isChecked = event.target.checked;
}
}
説明
上記の例では、2 つのチェックボックスと、それぞれに対応するラベルが定義されています。
ngModelを使った例では、isCheckedというプロパティが定義されています。このプロパティは、チェックボックスの状態を表すブール値です。ngModelディレクティブによって、チェックボックスの状態がisCheckedプロパティに双方向にバインドされます。
<input type="checkbox" checked [(ngModel)]="isChecked">
<input type="checkbox" disabled [(ngModel)]="isChecked">
Angular 5 で HTML テンプレートと TypeScript でチェックボックスのブール値を制御する方法 - その他の方法
Reactive Forms は、Angular に組み込まれたフォーム管理ライブラリです。Reactive Forms を使うと、チェックボックスを含むフォーム要素を簡単に管理することができます。
<form [formGroup]="myForm">
<input type="checkbox" formControlName="myCheckbox">
</form>
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor() { }
ngOnInit() {
this.myForm = new FormGroup({
myCheckbox: new FormControl(false)
});
}
}
上記の例では、Reactive Forms を使って、myCheckbox という名前のチェックボックスを含むフォームを作成しています。FormControl クラスを使って、チェックボックスの状態を表す myCheckbox という名前のコントロールを作成しています。
Template-driven forms は、Angular に組み込まれたもう 1 つのフォーム管理ライブラリです。Template-driven forms は、Reactive Forms よりもシンプルですが、機能も限定されています。
<form (ngSubmit)="onSubmit()">
<input type="checkbox" [(ngModel)]="myCheckbox" name="myCheckbox">
<button type="submit">送信</button>
</form>
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyComponent {
myCheckbox: boolean = false;
onSubmit() {
console.log(this.myCheckbox);
}
}
カスタムディレクティブを使って、チェックボックスのブール値を制御することもできます。
<input type="checkbox" appMyCheckbox [(ngModel)]="isChecked">
import { Directive, Input, Output, EventEmitter } from '@angular/core';
@Directive({
selector: '[appMyCheckbox]',
exportAs: 'appMyCheckbox'
})
export class MyCheckboxDirective {
@Input() isChecked: boolean;
@Output() change = new EventEmitter<boolean>();
onChange(event) {
this.isChecked = event.target.checked;
this.change.emit(this.isChecked);
}
}
上記の例では、MyCheckboxDirective という名前のカスタムディレクティブを作成しています。このディレクティブは、isChecked というプロパティと change というイベントを出力します。isChecked プロパティは、チェックボックスの状態を表すブール値です。change イベントは、チェックボックスの状態が変更されたときに発生します。
- シンプルで使いやすい方法が必要な場合は、ngModel を使うのがおすすめです。
- よりきめ細かい制御が必要な場合は、イベントを使うか、Reactive Forms を使うのがおすすめです。
- 高度なカスタマイズが必要な場合は、カスタムディレクティブを使うのがおすすめです。
html angular typescript
