Javascript 输入类型值的更改="；时间“；在视图中不反映在模型中的角度

我试图验证

input type=“time”：

但如果任何输入为空，视图中的更改不会反映在模型中

示例

如果用户更改小时数，它不会反映在视图中

然而这很好用

如果输入部分已填充，如何使模型中的值可用

迄今为止：

我尝试了

（输入）

和

（更改）

，但没有成功

已尝试

@ViewChild（）

访问DOM元素

尝试了反应形式

值更改
方法

组件

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

注意：

所需的验证器工作正常，但我需要得到部分填充值 在我的模型中

---

不幸的是，没有直接的方法来完成，因为

HTML5

本身会在给出所有时间值之前设置值。如果未提供任何值，则输入值将设置为未定义。所以这与角度无关

---

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

当所有零件都已满时，时间类型将被触发，在填充所有零件后，您可以触发小时、分钟和上午/下午的更改。 对于以反应形式使用并检查所有零件是否已满，您可以使用

验证器。必要时

验证并检查，直到给出所有零件：

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

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

---

感谢您的回复最终我使用了第三方库来满足客户的相同要求，因为客户的要求有点复杂