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">で全角入力するとフォーカスが外れてしまう