この記事は JSL (日本システム技研) Advent Calendar 2018 - Qiita 11日目の記事です。
突然ですがvue.jsの話題です。Element-UIのフォームでvalidationする際は普通はrulesの各フィールドにvalidatorを指定して任意のチェックをすれば事足ります。
なんですが、formのドキュメントにある通りこのvalidatorの引数は (rule, value, callback)でプリミティブな値であるvalueをチェックするほかなく、ほかのフィールドを参照できません。なので、ドロップダウンやラジオボタンの選択状況により入力必須か否かが変わる場合にvalidatorだと適切にチェックできません。
その場合は、form-itemのerrorというpropsに任意のタイミングでエラーメッセージを設定することができるので、それで実現します。
この方法を見つけるまでにけっこう時間がかかってしまったのですが、form-itemの当該propsのドキュメントには
field error message, set its value and the field will validate error and show this message immediately
とあり、今となってはうんまあそうだよなとは思うのですが、英語なこともあり最初にこれに行き着くことはなく、ソースを読んで見つけました。
サンプルを下記に起きました。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発
- 作者: 花谷拓磨
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/10/17
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
