Question

我实现了一个非常简单的表单来选择下面代码中的时间范围：

<form [formGroup]="editEventForm" (ngSubmit)="c(onSubmitUpdate())">
  <div class="form-group bottom-form-details">
    <div class="row">
      <div class="col-sm-6">
        <label class="labels-status-form">Start Time</label>
      </div>
      <div class="col-sm-6">
        <ngb-timepicker [(ngModel)]="startTime" formControlName="startTime"></ngb-timepicker>
      </div>
    </div>
  </div>
  <div class="form-group bottom-form-details">
    <div class="row">
      <div class="col-sm-6">
        <label class="labels-status-form">End Time</label>
      </div>
      <div class="col-sm-6">
        <ngb-timepicker [(ngModel)]="endTime" formControlName="endTime"></ngb-timepicker>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="submit" class="btn btn-primary btn-5">Update</button>
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</form>

模型 startTime 和 endTime 只获取当前小时和当前分钟。

一旦我通过ngb-timepicker设置开始时间（小时和分钟），我想从开始时间设置结束时间。即如果我将05:30作为开始时间设置，我想从05:31设置结束时间。

ngb-datepicker 提供 [minDate] ，但 ngb-timepicker 不是这种情况。有没有办法在Angular 4中做到这一点？

提前致谢。

Answer 1

通过验证可以做到这一点。您应该使用 [formControl]

模板：

<ngb-timepicker [(ngModel)]="endTime" formControlName="endTime" [formControl]="ctrl"></ngb-timepicker
      <div *ngIf="ctrl.valid" class="small form-text text-success">Great choice</div>
      <div class="small form-text text-danger" *ngIf="!ctrl.valid">
        <div *ngIf="ctrl.errors['required']">Select some time during lunchtime</div>
        <div *ngIf="ctrl.errors['tooLate']">Oh no, it's way too late</div>
        <div *ngIf="ctrl.errors['tooEarly']">It's a bit too early</div>
      </div>

打字稿：

  ctrl = new FormControl('', (control: FormControl) => {
    const value = control.value;

    if (!value) {
      return null;
    }

    if (value.hour < 12) {
      return {tooEarly: true};
    }
    if (value.hour > 13) {
      return {tooLate: true};
    }

    return null;
  });
}

将最小时间设置为ngb-timepicker Angular 4

1 个答案: