IgbInput コンポーネントにおいて、バリデーションエラーに応じたカスタムメッセージを表示する方法をご紹介します。
本記事では、入力の文字数やパターンに基づいて、カスタムしたメッセージを表示する方法を解説します。
IgbInput の設定
IgbInput にMinLength、MaxLength、Patternを設定し、各種エラーに対応するを追加します。
以下のように、too-short / too-long / pattern-mismatch スロットを使用します。
<IgbInput Label="ユーザーID"
@bind-Value="@inputValue"
MinLength="6"
MaxLength="12"
Pattern="^[a-zA-Z0-9]*$">
<p slot="too-short">6文字以上の英数字を入力してください</p>
<p slot="too-long">12文字以内で入力してください</p>
<p slot="pattern-mismatch">英数字のみを入力してください</p>
</IgbInput>
実行結果
上記の設定を行うと、バリデーションの種類に応じたカスタムエラーメッセージを設定できます。
