BlazorでのWebアプリケーション開発手法２【C#】C03_ValidationMessage

前回のレクチャーでは、ValidationSummaryコンポーネントを使ってバリデーションエラーを表示する方法を解説しました。ValidationSummaryを使うと、複数の項目にエラーがあっても、画面の一箇所にまとめてエラーメッセージが表示されます。

図1: ValidationSummaryによるエラー表示（一箇所にまとめて表示される）

基本的にはValidationSummaryを使うだけで十分なケースが多いのですが、「項目ごとに、その項目の近くに個別でエラーメッセージを出したい」という場合もあります。たとえば、エリア名称の入力欄にエラーがあれば、エリア名称の欄のすぐ下にエラーを表示する、といった見せ方です。今回は、そのようなケースで使う ValidationMessage コンポーネントについて解説します。

ValidationMessageコンポーネントを追加する

エリア名称の入力欄（input要素）の下に、ValidationMessageコンポーネントを追加します。入力し始めると、IntelliSenseがコンポーネントの説明を表示してくれます。

図2: ValidationMessageと入力するとIntelliSenseが説明を表示する（「指定したフィールドのカスケードされたEditContext内での検証メッセージの一覧を表示する」という内容）

ValidationMessageコンポーネントには、どの項目のエラーを表示するかを指定するためのForという属性があります。

図3: For属性がIntelliSenseの候補として表示される

Forには、対象のプロパティを返すラムダ式を、@() で囲んで指定します。エリア名称の場合は次のようになります。

図4: エリア名称の入力欄用に追加したValidationMessage（For=”@(()=>AreaName)”）

<div class="mb-3">
    <label>エリア名称</label>
    <input type="text" @bind="AreaName" />
    <ValidationMessage For="@(()=>AreaName)" />
</div>

For属性にマウスを合わせると、AreaNameが Home コンポーネントの string 型プロパティ（get; private set;）であることが確認できます。ここで指定するのは、値そのものではなく「そのプロパティを返す関数（ラムダ式）」である点がポイントです。

図5: AreaNameにカーソルを合わせると型情報がツールチップで表示される（string Home.AreaName { get; private set; }）

担当者の入力欄にも同様に追加する

担当者（ManagerName）の入力欄にも、同じ要領でValidationMessageを追加します。Forに指定するプロパティ名をManagerNameに変えるだけです。

図6: 担当者の入力欄用に追加したValidationMessage（For=”@(()=>ManagerName)”）

<div class="mb-3">
    <label>担当者</label>
    <input type="text" @bind="ManagerName" />
    <ValidationMessage For="@(()=>ManagerName)" />
</div>

動作確認

この状態で実行し、両方の項目を未入力のまま保存ボタンを押すと、各項目のすぐ下に個別のエラーメッセージが表示されます。ただし、まだValidationSummaryを残しているため、画面下部にはこれまで通りまとめてのエラー一覧も表示されます。

図7: 個別のValidationMessageと、既存のValidationSummaryが両方表示されている状態

個別にエラーを表示するのであれば、ValidationSummaryは不要になるため、コメントアウトしておきます。

図8: ValidationSummaryをRazorコメント（@* … *@）でコメントアウトする

アプリを再実行すると、初期状態ではエラーは表示されません。

図9: 再実行直後の画面（エラーメッセージなし）

担当者だけに値を入力した状態で保存を試みると、未入力のエリア名称の欄にだけエラーメッセージが表示され、担当者側にはエラーが出ません。

図10: 担当者のみ入力済みの場合、エリア名称の欄にだけエラーが表示される

逆にエリア名称だけに値を入力した場合は、担当者の欄にだけエラーメッセージが表示されます。このように、ValidationMessageを使うと、エラーのある項目だけ、その項目の近くにピンポイントでメッセージを出すことができます。

図11: エリア名称のみ入力済みの場合、担当者の欄にだけエラーが表示される

最後に、両方の項目に値を入力して保存ボタンを押すと、「保存しますか？」という確認ダイアログが表示され、OKを押すとエラーなく保存が完了します。

図12: 両方入力済みで保存を押すと確認ダイアログが表示される

図13: OKを押すとエラーメッセージは表示されず、保存処理が完了する

このように、画面全体でまとめてエラーを表示したい場合はValidationSummary、項目ごとに個別で表示したい場合はValidationMessageを使う、という使い分けができます。個別に出したい場合は、今回のようにValidationMessageのFor属性に対象プロパティを返すラムダ式を指定して使ってみてください。