如何从 ngx-timepicker-field 获取用户输入

Question

我是 Angular 新手，目前使用 v7 我正在尝试更改

ngx-timepicker-field

的默认时间 当用户输入新时间时，因为时间是通过键盘而不是钟面输入的

<!-- removed classes to reduce the need to scroll/>
<div formArrayName="operatingTimes">
    <div [formGroupName]="Monday">
       <div >
           <mat-checkbox formControlName="isOpen">Monday
           </mat-checkbox>
       </div>
       <div >
            <ngx-timepicker-field [format]="24" defaultTime="08:00" formControlName="openTime">
            </ngx-timepicker-field>
       </div>

    </div>
</div>

所以我的问题是用户输入是如何注册的以及如何从用户输入的内容中检索输入的值

Answer 1

当时间通过用户输入手动更改时，您可以使用 eventEmitter

timeChanged

来获取新数据：

HTML：

<ngx-timepicker-field [format]="24" defaultTime="08:00" (timeChanged)="onChangeHour($event)">  </ngx-timepicker-field>

TS：

  onChangeHour(event){
    console.log(event);
  }

Answer 2

另一种可能性是设置对 html 元素的本地引用：

  <ngx-timepicker-field [format]="24" defaultTime="08:00" formControlName="openTime" #openTime>

然后在相应的打字稿文件中，您可以按如下方式访问所选时间：

@ViewChild('openTime') openTime: NgxTimepickerFieldComponent;

public myMethod(): void {
   console.debug(this.openTime.timePickerTime); // Output current selected time here
}

Answer 3

https://github.com/Agranom/ngx-material-timepicker/blob/master/README.md 我看到

ngx-timepicker-field

组件有一个属性 timeChanged ，它发出用户输入的时间

Answer 4

对于反应式表单，绑定表单控制变量：
.html 文件：

 <ngx-timepicker-field
             [minutesGap]="15"
             formControlName="startTime"></ngx-timepicker-field>

.ts 文件：

 startTime: new FormControl('9:00 am', [Validators.required])