Angularでのシステム開発を行っているが、テスト中に<input type="date">
に関する意味不明な不具合に遭遇したためメモ。
※この時のAngularバージョンは7.1.3
現象
通常、input type="date"にフォーカスした場合は半角入力となるが、以下のような入力フォームで、
<form [formGroup]="formGroup">
<input type="text" formControlName="name">
<input type="email" formControlName="email">
<input type="date" formControlName="date">
・・・
</form>
formGroup = new FormGroup({
'name': new FormControl('', [Validators.required]),
'email': new FormControl('', [Validators.required]),
'date': new FormControl('', [Validators.required]),
});
①nameを全角入力
②tabでemailに切り替え(勝手に半角入力に切り替わる)
③メールアドレス入力
③tabでdateに切り替え(勝手に全角入力に切り替わる)
④全角のまま入力
(Chromeにて動作確認)
という操作をすると、dateのFormControlに値が設定されなくなるという現象が発生する。
半角に切り替えて再度dateを入力しても値は設定されず、常に必須チェックに引っかかってしまっていた。
※単純にtype="date"に全角入力すると起こるっぽい
原因
input type="date"の項目に全角で入力すると、フォーカスが外れてしまうらしいのでそこら辺が原因だとは思うが、なぜ半角に切り替えた後もFormControlに値が設定されなくなるのかは不明。。。
この辺の知見がある方がいたらぜひ教えていただきたい。。。
回避策
今回はngx-bootstrapのDatePickerを使い、type="date"を使わないことで回避することにした。
https://valor-software.com/ngx-bootstrap/#/datepicker
そもそも、デフォルトのtype="date"だとブラウザによってUIが変わるのが気持ち悪かったので、ちょうど良かったかも(笑)