3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Angularでinput type="date"を使うべきではない!?

Posted at

Angularでのシステム開発を行っているが、テスト中に<input type="date">に関する意味不明な不具合に遭遇したためメモ。
※この時のAngularバージョンは7.1.3

現象

通常、input type="date"にフォーカスした場合は半角入力となるが、以下のような入力フォームで、

index.html
<form [formGroup]="formGroup">
    <input type="text" formControlName="name">
    <input type="email" formControlName="email">
    <input type="date" formControlName="date">
    ・・・
</form>
index.component.ts
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が変わるのが気持ち悪かったので、ちょうど良かったかも(笑)

参考

<input type="time">で全角入力するとフォーカスが外れてしまう

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?