【Angular】disabledプロパティによるフォームの有効性確認【[disabled]】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
「なんとなく理解とオサラバしよう！」のコーナーです！
継続するかは不明！たぶんしない！笑
フォームでよく見かけるdisabledプロパティとプロパティバインディングについて正しく理解していきます。
disabledプロパティによるフォームの有効性確認
disabledプロパティとは？
disabledとは直訳で
機能しない、無効
などを意味します。
disabledプロパティは、JavaScript(TypeScript)では要素のdisabled属性の値を取得したり、値を設定することができます。
disabled属性は要素を無効(true)にすることができます。disabled属性を有効(false)にすれば、要素はまた操作できるようになります。
Angularにおけるdisabledプロパティの使い方
Angularにおいては、disabledプロパティはプロパティバインディングと組み合わせて使うことが多くなると思います。
プロパティバインディングは、プロパティを［］で囲むバインディングで、コンポーネントからテンプレートに値を伝達することができます。
ファームの有効性確認
Angularではdisabledプロパティを使ってフォームの有効性を確認することが容易にできます。
formのテンプレート参照変数の値を利用して、送信(Submit)ボタンのdisabledプロパティを操作します。
component.html
<form (ngSubmit)="onSubmit()" #exampleForm="ngForm">
・・・
<button type="submit" class="btn btn-primary" [disabled]="!exampleForm.form.valid>送信</button>
・・・
これでフォームでエラーが発生している場合(=requiredルールに違反)、送信(Submit)ボタンも無効になります。
参考資料：
フォームの有効/無効の切替え
フォームの有効/無効を切替えることもできます。
comopnent.ts
<input type="text" [disabled]="isFormDisabled" value="テキスト">
<button type="button" (click)="onClick()">ボタン</button>
・・・
export class AppComponent {
isFormDisabled = false;
onClick() {
this.isFormDisabled = !this.isFormDisabled;
}
}
isFormDisabled変数のture/falseをボタンで制御することができました。
プロパティバインディングがあることで、disabledプロパティが格段に操作しやすくなりますね。
参考資料：
Angular の[disabled]バインディングはtrueかfalseで効くようです | 株式会社CONFRAGE ITソリューション事業部
今後に向けて
もっと難しい内容について記事が書けるようになりたい。
参考
素晴らしい記事に感謝いたします。
Angular の[disabled]バインディングはtrueかfalseで効くようです | 株式会社CONFRAGE ITソリューション事業部
