如何使用 Angular 4 从 Bootstrap 的 datetimepicker 中获取值？

Question

我正在尝试使用 Angular 的 (mouseup) 事件从两个引导日期时间选择器中获取日期。模板代码如下所示：

<h2>{{title}}</h2>
<form [formGroup]="leaveCreateForm" (ngSubmit)="onSubmit()">
  <div class="row">
      <div class="col-sm-4 form-group">
        <label for="startDate">Begin datum</label>
        <input type="datetime-local" id="startDate" class="form-control"
               placeholder="01-01-2017" formControlName="startDate"
               (input)="computeLeave()">
      </div>
  </div>
  <div class="row">
  <div class="col-sm-4 form-group">
    <label for="endDate">Eind datum</label>
    <input type="datetime-local"  data-date-format="dd/mm/yyyy" id="endDate" class="form-control"
           placeholder="02-02-2017" formControlName="endDate"
           (keyup)="computeLeave()">
  </div>
  </div>
  <div class="form-group">
    <table class="table">
      <thead>
      <tr>
        <th>Type</th>
        <th>Berekend</th>
        <th>Beschikbaar</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>Wettelijk</td>
        <td>{{leaveRequestedStatutory | number:"1.0-0"}}</td>
        <!--<td>{{leaveRemaining[0] | number:"1.0-0"}}</td>-->
      </tr>
      <tr>
        <td>Bovenwettelijk</td>
        <td>{{leaveRequestedNonstatutory | number:"1.0-0"}}</td>
        <!--<td>{{leaveRemaining[1] | number:"1.0-0"}}</td>-->
      </tr>
      <tr>
        <td>Totaal</td>
        <td>{{leaveRequestedTotal | number:"1.0-0"}}</td>
        <!--<td>{{leaveRemainingTotal | number:"1.0-0"}}</td>-->
      </tr>
      </tbody>
    </table>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Aanvragen</button>
    <button type="button" class="btn btn-default" (click)="onReset()">Reset</button>
  </div>
</form>

组件方法如下所示：

  private computeLeave() {
    console.log("computeLeave called..")
    this.leaveStartDate = this.leaveCreateForm.get('startDate').value as Date;
    this.leaveEndDate = this.leaveCreateForm.get('endDate').value as Date;
    console.log("Startdate: " + this.leaveStartDate.toString())
    console.log("EndDate: " + this.leaveEndDate.toString())
    if (this.leaveStartDate !== undefined || this.leaveEndDate !== undefined) {
      this.leaveRequestedTotal = 0;
      this.leaveRequestedStatutory = 0;
      this.leaveRequestedNonstatutory = 0;
    }

    this.leaveRequestedTotal = this.leaveStartDate.getHours() + this.leaveEndDate.getHours();

    this.leaveRequestedStatutory = this.leaveRequestedTotal * 0.8;
    this.leaveRequestedNonstatutory = this.leaveRequestedTotal * 0.2;
  }

当我在日期时间选择器中选择一个日期时，检索到的对象不包含所选日期，事实上，它不包含任何内容。

在 stackoverflow postAngular 2 Material Datepicker Value 他们正在谈论使用 [(ngModel)] 但是我正在使用与 formControlNames 一起使用的 formGroup 对象，所以我不确定我是否可以将这种方法与 [(ngModel)] 一起使用.有人可以给我一些指示吗？我对 Angular 比较陌生。

谢谢

Answer 1

您可以使用[(ngModel)]，但如果您这样做，我会将使用的变量与反应式表单控件绑定，即

private endDate: Date;
this.leaveCreateForm = fb.group({
   'endDate': this.endDate 
)};

 <input [(ngModel)]="endDate" type="datetime-local"  data-date-format="dd/mm/yyyy" id="endDate" class="form-control"
       placeholder="02-02-2017" formControlName="endDate (keyup)="computeLeave()">\

由this.endDate 在您的组件中访问。

否则，您也可以通过在表单控件value 上调用表单get 函数来使用[(ngModel)] 获取值：

this.leaveCreateForm.get('endDate').value;