Изменения в значении input type = "time" в View не отражаются в Model of Angular

Question

Я пытаюсь проверить input type="time":, но изменения в представлении не отражаются в модели, если какой-либо из входных данных пуст

Пример

Если пользователь меняет час, он не отражается в представлении.

, тогда как это работает нормально.

Как сделать значение доступным в модели, если ввод частично заполнен?

Попытка до сих пор:

1. Я пытался (input) и (change), но это сделалне работает.
2. Попытка @ViewChild() для доступа к элементу DOM
3. Попытка ReactiveForm ValueChanges метод

компонент

  @ViewChild('ref') ref:ElementRef;
      name = 'Angular';
      time=new FormControl('')

      constructor(){
        this.time.valueChanges.subscribe(val=>console.log(val))
      }
      event(event)
      {
        console.log(event.target.value)

      }

      ngDoCheck()
      {
        console.log(this.ref.nativeElement.value)
      }

HTML

<input type="time" #ref (input)="event($event)"  [formControl]="time"> 

Примечание:

обязательно Validator работает нормально, но мне нужно получить частично заполненное значение вмоя модель.

StackBlitz

Answer 1

тип времени срабатывает, когда все части заполнены, после заполнения всех частей вы можете инициировать изменения в часах, минутах и ​​AM / PM.для использования в реактивной форме и проверки, все ли части заполнены, вы можете использовать Validators.required проверку и проверять, пока не будут даны все части:

time=new FormControl('', Validators.required )

constructor(){
  this.time.valueChanges.subscribe(val=>console.log('hi' , val))
}
submit(){
  console.log('form is' , this.time.valid);
} 

DEMO

Answer 2

К сожалению, прямого способа выполнить нет, поскольку HTML 5 само устанавливает значение до тех пор, пока не будут заданы все значения времени.Если какое-либо значение не указано, входное значение будет установлено как неопределенное.Так что это не имеет ничего общего с Angular.

Если вы хотите сделать то же самое, вам нужно написать пользовательский компонент.