在NgbDatepicker-Angular

时间:2019-11-24 06:05:02

标签: angular ngb-datepicker

我正在尝试使用以下代码将当前日期设置为NgbDatepicker中选择的日期。 (我正在使用反应形式。)

ngOnInit() {
  this.createEmployeeLunchEntryForm();
}

createEmployeeLunchEntryForm() {
  const currentDate = new Date();
  const currentDateObj = {
    year: currentDate.getFullYear(),
    month: currentDate.getMonth(),
    day: currentDate.getDay()
  };

  this.employeeLunchEntryForm = this.fb.group({
    date: [currentDateObj, Validators.required]
  });
}

但是会出现以下错误:

  

错误错误:ExpressionChangedAfterItHasBeenCheckedError:检查表达式后,表达式已更改。先前的值:'is-invalid:null'。当前值:“无效:false”。

如果我执行以下操作,该错误就会消失,显然这不能解决我的问题:

date: [null, Validators.required]

这是html部分:

<form [formGroup]="employeeLunchEntryForm" 
(ngSubmit)="saveEmployeeLunchInfo()">
        <div class="form-area">
            <div class="row">
              <div class="col-md-8 form-inner-area">
                  <div class="form-group row">
                      <label for="date" class="col-sm-3 col-form-label text-right">Date<span class="text-red">*</span></label>
                      <div class="col-sm-7">
                          <div class="input-group">
                              <div class="input-group-prepend">
                                <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                              </div>
                              <input class="form-control datepicker" 
                              [ngClass]="{
                                'is-invalid':
                                employeeLunchEntryForm.get('date').errors &&
                                employeeLunchEntryForm.get('date').touched
                              }"

                              formControlName="date" placeholder="Select date" name="date" 
                              ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()" type="text" />
                              <div
                        class="invalid-feedback"
                        *ngIf="
                        employeeLunchEntryForm.get('date').touched &&
                        employeeLunchEntryForm.get('date').hasError('required')
                        "
                      >
                        Please enter date
                      </div>
                            </div>
                      </div>
                  </div>
              </div>
            </div>
        </div>
</form>

我在做什么错?另外,请提出一种更好的方法来设置NgbDatepicker中选择的当前日期。

0 个答案:

没有答案