【Angular4】自作のサロゲートペアのバリデーションを追加

基本的には正規表現のpatternを登録するだけで事足りていたのですが、文字列にサロゲートペア文字列が含まれる時に invalid にする必要がある場面に出くわしました。 そのためには Angular の FormBuilder に自作のバリデーションを追加する必要がありました。

Validators.compose() にメソッドを渡すことで自作のバリデーションを実行することができました。

以下のような形です。

// サロゲートペア文字列が含まれているかチェック
hasSurrogatePair(formCtrl: FormControl) {
  const invalid = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g.test(formCtrl.value);
  if (formCtrl.value === '' || !invalid) {
    return null;
  } else {
    return {'invalidSurrogatePair': true};
  }
}

// 姓名の入力でサロゲートペア文字をチェック
this.userForm = formbuilder.group({
  first_name: ['', Validators.compose([this.hasSurrogatePair])],
  last_name: ['', Validators.compose([this.hasSurrogatePair])]
});

Angularアプリケーションプログラミング

山田 祥寛

Angularによる動的Webアプリケーション開発に必要となる知識が、この1冊で身に付きます!

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

榊原 昌彦

Ionicの最大の特徴は、UIデザインの良さです。海外には多くのユーザがいますが、その多くは「UIデザインがいいからIonicにした」と答えています。