视图中输入类型=“时间”的值更改未反映在角度模型中

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"> 

注意：

  

必需的验证器工作正常，但我需要获取部分填充的值   在我的模型中。

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

不幸的是，由于gcc 8本身会设置值直到给出所有时间值，所以没有直接的方法可以完成。如果未提供任何值，则输入值将设置为undefined。因此，与HTML 5无关。

如果要完成相同的操作，则需要编写自定义组件。