AngularJSのValidationで、maxlength, minlengthのサロゲートペア対応

ども。

最近は某案件に突っ込まれているのでわりとAngularJSを使っています。

Angular、便利は便利なんですがちょっと癖がありますね～。

しかし、これの思想を理解しておくことは（特に設計等を考える立場の人にとっては）大変有益だと思います。

一度はがっつり使ってみておくのも良いんじゃないでしょうか。(^^;

(↑ これは個人的にはあんまり積極的には使わないという意味でもあるんですが。。。)

それはさておき、Validationです。

Angularではinput要素にng-requiredとかng-maxlengthとかをつけておくとFormのモデルに自動的にエラー情報が付加されます。

非常に便利です。(^^v

。。。が、このng-maxlength。割と後半になってからサロゲートペア未対応であることが判明！

えーーー。。。。(--;;;;

まぁ、言うてもJavaScriptはもともとサロゲートペアはまともに扱えないので予測はできてもおかしくなかったんですが、こういうのは必要に迫られるまでは忘れてますよね。。。(--

もう2010年代も半ばなんだから、フレームワーク側でサロゲートペアもよしなに扱ってほしいとは思うんですが、既にいっぱい使っちゃってるng-maxlengthをどう対処していくべきか。。。

★ 対処法

あんまりブログに時間かけてる場合でもないんで、さっくり答えを書いちゃうと自前でdirectiveを定義することでほとんど改修コストをかけずに修正することができました。

ここではsp-maxlength、sp-minlengthという2つのdirectiveを定義していますが、エラー情報の設定名はそれぞれ「maxlength」、「minlength」としています。(ng-maxlength, ng-minlengthが使用している名前と同じです。)

このため、input要素での宣言だけを「sp-maxlength」に置き換えてやれば、エラー表示の制御等で使用しているであろう

form.inputName.$error.maxlength

の部分は変更不要です。

ちゅーことで、単純なGREPと置換で対処することができました。

ちなみに同時に行った対処としてPlayframeworkのValidationでmaxlength, minlengthのサロゲートペア対応というのもあるんだけど、こっちはソースをコピってきて一部書き変えただけだから割愛。

めでたしめでたし(なのか？)