【Angular】メッセージの表示/非表示を切り替える

概要

必須項目のテキストボックスに値を入れない状態ではメッセージを表示、値を入れたらメッセージを表示することにします。

今回はデータバインディング({{variable}})ではなくテンプレート参照変数というものを使います。 テンプレート内の要素に#変数名として指定すると使用できます。

テンプレート側

foo.component.html
<input type="text" #input_TextBox="ngModel" [(ngModel)]="inputText" required="text"/>
<div [hidden]="!input_TextBox.errors.required">値を入力して下さい。</div>

用意したテンプレート参照変数#input_TextBoxとngModelを紐づけます。 TextBoxを必須項目にしておいて、必須項目なのに値が入っていない時にはエラーが発生する仕組みです。 エラーが出ていればdivを表示、出ていなければdivを隠します。

ngIfを使用するとそもそも要素が生成されなくなり、今回は不適と判断して[hidden]を使用しました。

テンプレート参照変数の命名ですが、"-"を使うと

Template parse errors: "-" is not allowed in reference names

こんな感じで怒られました。"_"(アンダーバー)は使えました。

動作側

foo.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.css']
})
export class FooComponent {
  inputText = '';
}

ngModel補足

ngModelを使いたい場合はapp.module.tsで定義しておきましょう。

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [FooComponent]
})
export class AppModule { }

Angular application programing

いつもこの本にお世話になってるんですが、辞書みたいに羅列されていて頭に入ってきません🐑💤💭

Angular公式って賢い人が作ったみたいで、それっぽい検索ワードで調べたのにわたしにもわかる解説が出てきませんでした。

素人は『テンプレート駆動フォーム』なんて専門用語わからないです。公式さんにはもっと初心者に優しくなってほしいものです。