VisualforceとAngularJSで入力ページをつくってみました。CSS部分はLightning Design Systemを利用していています。
apexタグに頼らないJavaScript Remoting中心の作りになっています。
ページ構成
ページ構成は以下のとおりです。
- AngularValidation.page
- 利用時に呼び出すメインのページ
- AngularValidationInput.page
- 最初に表示される入力ページ
- AngularValidationResult.page
- 保存後に表示される詳細ページ
- AngularValidationAppJs.page
- Angularのルーティング情報を記載したJS
- AngularValidationControllerJs.page
- 保存や値セットなどの処理を記載したJS
※サンプルなのでServiceやdirective関係の処理はControllerJsにまとめて記載してします。
画面の動き
最初の入力ページで値をセットします。
正しく登録情報を入力して保存ボタンをクリックすると、RemoteActionでApex処理を呼び出し取引先責任者を登録します。保存処理後、メッセージが表示され詳細ページに移動します。(確認メッセージはSweetAlertを利用して表示しました。SFDC標準スタイルの影響でボタン部分のデザインが正しく表示されませんでしたが、デモ用なのでそのままにしました。)
詳細ページはこんな感じになっています。
詳細ボタンをクリックすると登録レコードの詳細ページが表示されます。
画面の動きはこんな感じです。日付の登録だけちょっと雑につくってあるので9時間ずれて保存されています。
入力チェック
今回やりたかったことのメインです。必須チェックや文字数チェックなどをリアルタイムで判定する必要があったため、Anuglarを利用してみました。
AngularJSでは『ng-message』を利用するとエラー発生時にメッセージを表示することができます。(その他、ng-showなどでも表示の有無を切り替えたりできます。)
必須チェック
inputタグに『required』を宣言すると『ng-message』で必須チェックができるようになります。
文字数上限チェック
inputタグにng-maxlengthを宣言すると最大文字数のチェックができます。(最小文字数を判定する属性も用意されています。)
入力形式のチェック
例えばinput type="email"を宣言して、不正な形式で入力した際にng-message="email"でエラーメッセージを表示できます。
input type="date"など他の形式でも同様です。
別の入力値との一致判定
別の入力値との一致判定をチェックしたい場合は、自作のdirective処理を用意します。
directiveで用意したmatch処理は次のように呼び出して使用できます。
これでよくある再入力確認を実装できます。
正規表現チェック
独自の入力規則通りに入力されているかチェックしたい場合、ng-patternをつかって正規表現チェックが可能です。
電話番号の入力などで利用できます。
エラーメッセージの表示に使用したng-messageですが、利用したい場合、『angular-messages.js』を読み込む必要があります。
また、AppJsの処理で"ngMessages"の宣言を忘れずに行う必要があります。
ボタンの活性/非活性
AngularJsでは入力フォームのエラーを判定して活性/非活性を簡単に切り替えることができます。
活性
非活性
これを利用するにはformタグとname属性を宣言する必要があります。novalidateを宣言するとブラウザ側の入力チェックを無効にできるみたいです。
あとは、切り替えたいタグに『ng-disabled="inputForm.$invalid"』という感じで宣言してあげると反映されます。
自分がうっかりハマってしまったミスとして、エラーチェックはmg-messageの有無に関わらず実行されます。メッセージが表示されていないからといってエラーになっていないというわけでありませんでした。(裏でエラーになっていることに気づかずなんで切り替わらないんだろう・・と悩んでました。)
$invalidなどの詳細はこちらです
入力チェックのタイミング
AngularJsにはフォーカスが外れたタイミングや値が変更されたタイミングを判定することもできます($dirtyなど)。ng-classと組み合わせて、値変更後にエラーチェックを行い、エラーの場合、CSSを追加というような使い方ができます。
デモ動画とサンプルコード
今回つくったサンプルページのデモ動画です。
サンプルコードはこちらです。
参考サイト
今回、AngularJSで実装するにあたり、以下のサイトが参考になりました。
- AngularJS 1.3のフォームまわりの機能強化 : アシアルブログ
- Easy Form Validation in AngularJS with ngMessages
- AngularJS： 入力フォームに検証機能を実装するには？（form／input） - Build Insider
- 【AngularJS】で空の配列を判定したい場合。
- 入力フォームでコピペ(コピー&ペースト)を禁止する方法 - [サンプルコード /JavaScript] ぺんたん info
- 【AngularJS】複数のコントローラー間で値を共有する。
AngularJSで登録ページをつくるときに調べたりしたことは以上のような感じでした。
さいごに
今回、CSS部分はLightning Design Systemを利用しました。これにより自分でCSSを用意することなく実装することができました。Lightning Design Systemは本当に便利なCSSフレームワークだと思います。
またLighting Design Systemを利用することでLightning Experienceでもそのまま利用できるデザインを実現できます。
参照ページ(Read Only)もこの通りです。
S1ページでももちろん利用できます。
ただ...Lightning Design Systemとは関係ないところの話ですが、PCで動いた画面をS1アプリで利用しようとした際に、実装方法が悪いのか入力時に画面が表示されなくなったりしました。(directiveで用意した別項目との値一致判定の処理を使用すると発生。)
VFページをS1アプリとして利用する場合は思わぬ落とし穴があるみたいなので注意が必要そうです。
とりあえず、Lightning Design Systemは最高だと思いました。