validation & error messages

[ppoi]

validationは、M由来の良くない書き方なので、別の方式を用意する必要がある。

• 基本的に、1FormGroupが1フォームアイテム(入力項目)であり、バリデーションおよびエラーメッセージの表示制御の単位となる。
• FormGroupを利用するコンポーネント側が、そのFormControl内にinputなどを書き、そのイベントハンドラでバリデーションする。
  • フォームアイテムの状態としては以下のステータスがある
  • 正常
  • 入力中
  • エラー
  • 現状のバリデーション方式
    1. 通常のフォームアイテム
       1. onfocusで入力中状態に遷移。エラーメッセージを消す。
       2. on{change,blur}でバリデーションを実行
          • OKの場合: 正常。エラーメッセージを消す。
          • NGの場合: エラー。エラーメッセージを表示
    2. フォーム以外の入力画面(modal)を使った項目
       • modal表示で入力状態に遷移。エラーメッセージは消さない？
       • modalから値が戻ってきた際にバリデーション実行。
         • OKの場合: 正常。エラーメッセージを消す。
         • NGの場合: エラー。エラーメッセージを表示
    3. 更新ボタン等でフォームの内容をAPIに送信する際の全アイテム検証
       • 各アイテムをバリデーションして全て正常ならOK、不正があればそれぞれエラーメッセージを表示させる

[ppoi]

1. FormGroupはFormItemに変更
2. FormItemはcontextにstatus storeを設定
3. inputに対応するInputを作成
4. Inputはcontextからstatus storeを取得し、入力ステータス変更毎にstatusを更新する
5. Inputはバリデーションタイプ、またはカスタムバリデーションコールバックを公開プロパティとしてもつ
6. Inputは公開プロパティとしてvalidate()メソッドをもつ

HTML5 validationと絡めてもう一ひねり欲しい。

<FormItem>
  <Input type="text" bind:this="{hogeItem}" name="hoge" value-type="simple-text" validator="{()=>{...}}" />
</FormItem>
<FormItem bind:status="{listItemStatus}">
    <button on:click="{()=>{...}}"></button>
    <DataTables ...>
</FormItem>