Skip to main content

インプットの使い方

DefaultValueを設定する

初期値で入る値を設定します。固定値もしくは動的な値を設定します。

入力タイプを設定する

入力する文字のタイプを設定します。

インプットの初期値に動的な値を適用する

  1. [カラム]をドラッグ&ドロップします。
  2. [テーブル]をドラッグ&ドロップします。
  3. [インプット]をドラッグ&ドロップします。
  4. [状態管理]をクリックし、[UIエレメント] から [table1] をクリックして [selectedRow] の中の [data][name] が入っていることを確認します。
  5. [インプット][DefaultValue]{{ table1.selectedRow.data.name }} と入力します。

テーブルの選択する行を変更すると、それによって初期値が変更されます。
これは、特定の値を更新するときのインプットなどによく使用します。

{{ }} はコンポーネントの状態にアクセスでき、内部ではJavaScriptを実行することができます。{{ }}を使わずに、固定の値を入れることも可能です。

バリデーションを設定する

インプットに対して様々なバリデーションを設定することができます。
バリデーションが設定されているインプットには invalid というパラメータが使えるようになります。
invalid は入力を監視し、リアルタムで変更されるので、{{ input1.invalid }} という形でボタンの [無効にする条件] などで活用できます。

また、データフローがバリデーション設定済みのインプットを参照している場合、実行前にチェックし、条件を満たしていない場合にはエラーとなります。