Angular の入力チェックとエラーメッセージについて

やりたいこと

Angular 5 で、以下の要件を満たすページを作りたい。

要件

  • 入力チェックのタイミングは Submit 時(リアルタイムではない)
  • エラーメッセージ領域は1行分だけ
    • 入力エラーが1つでもある場合は「エラーがあります」と表示
    • エラーのあるコントロールにフォーカスを当てると、メッセージエリアのテキストが、当該コントロールのエラーの説明に切り替わる

いくぶんレガシーな画面設計だが、基幹系の業務アプリケーション等、エラーの表示領域が限られている場合に使えまいかと考えている。

試したこと

試しに、要件を満たすデモを作って Plunker に上げた。 動きは以下の通り。

  • 適当に入力して「登録」ボタンを押すと、そのタイミングで入力チェックが走り、エラーがある場合は画面上部にうやうやしく設置された1行分のメッセージエリアに「エラーを直せ」的な命令が出現する。
  • さらにエラーのあるコントロールがこの季節らしいピンク色に染まり、只ならぬ雰囲気を放つ。
  • そして、ピンクと化したコントロールにフォーカスを当てると、メッセージエリアの内容が書き換わり、何が問題なのかを具体的に指摘してくれる。

Plunker は、どういうわけか 初期表示がアホみたいに遅いのと、Chrome 以外のブラウザでは表示がバグってしまうというダブルの欠陥がある。 閲覧環境によっては左側に無駄なスペースが表示されているかも知れない(iPhone + Safari だと表示すらされないかも知れない)。

  • 要件を実現するためReactiveフォームを使用した
    • フォーカス状態をプロパティに持てるよう、FormControlDirective および FormControl のサブクラスを作った

困っていること

とりあえず動きはするが、いろいろ実装上まずい点がある。

  • input タグに、ngDefaultControl ディレクティブをいちいち指定しなくてはならなくなった
  • バリデーションエラーのコントロールに対して、ng-invalid クラスが自動で設定されなくなった(致命的)

そもそも、FormControlDirective を拡張する際のベストプラクティスが分からん。