12h mode doesnt work with reactive forms when initialized

[DCh06]

This is also happening in the demo app on stackblitz, in the latest example.

Demo: TS: // in constructor const d = new Date(); d.setDate(1); d.setMonth(2); d.setHours(14); d.setMinutes(0); d.setSeconds(1); d.setMilliseconds(10); this.defaultValue = d;

this.form = this.formBuilder.group({
  time: [this.defaultValue, Validators.required]
});

HTML: <form [formGroup]="form">

Time

Reactive Form Value: {{form.value | json}}

{{form.get('time').errors | json}} <button (click)="changeMaxValue()">Change Max Value

Expect: When setting default value through form control, expected input to be in "hh:mm am/pm" format (2:00 pm).

Actuall: Input is defaulted to 24h hh:mm format (14:00) even when 12h mode is set

Reason: when selecting 12h mode the 24h mode is still selected when rendering default input value in @Input() set value(value: Date){...}