インラインメッセージを使うインラインメッセージは、１つのコンポーネントに関するエラーメッセージを表示します。
ここでは、テキストフィールドに文字が入力されていない場合に、エラーメッセージを表示する例を使って、インラインメッセージの使用方法を説明します。
(1) テキストフィールドコンポーネントをドラッグ&ドロップし、プロパティのIDをinputに修正します。
テキストフィールドは入力必須とするので、プロパティのrequiredにチェックをつけます。
(2) テキストフィールドコンポーネントの横あたりに、インラインメッセージコンポーネントを配置します。
(3) インラインメッセージのプロパティのforをクリックし、テキストフィールドのIDであるinputを選択します。
forは、どのコンポーネントに対してエラーメッセージを表示するのかを設定するプロパティです。
ここまでで、インラインメッセージを使う場合の設定は終了ですが、実際の動きを見るために、ボタンを配置して、クリック時にエラーメッセージを出してみましょう。
(4) ボタンコンポーネントをドラッグ&ドロップします。ボタン名称は、変更しなくても構いません。
プロジェクトを実行し、テキストフィールドに何も入力せずにボタンをクリックしてみてください。
”妥当性エラー：XXXは必須です”というエラーメッセージが表示されたと思います。
このように、インラインメッセージは、あるコンポーネントに対しての入力チェックなどのエラーメッセージを表示します。
※ この例では、必須入力であるかどうかをチェックしてメッセージを表示する例を示しましたが、その他に、入力桁数などをチェックするバリデータ機能があります。
このバリデータ機能については、後で説明します。
