带有向上和向下箭头的 ngb 时间选择器问题

Question

I am using bootstrap 4 and ngb time picker for my angular 10 project. I added all code correctly. But time picker up and down arrows not working. this is my code

  <ngb-timepicker [(ngModel)]="time" formControlName="time"></ngb-timepicker>

my component like below

    import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-my-profile',
  templateUrl: './my-profile.component.html',
  styleUrls: ['./my-profile.component.css']
})
export class MyProfileComponent implements OnInit {
  profile: any = {};
  @ViewChild(NgForm) profileform: NgForm;
  constructor() { }

  ngOnInit() {
  }

  time: NgbTimeStruct = { hour: 13, minute: 30, second: 0 };
  addScheduleCheckin() { }
}

When i click the up and down arrows this error fired.

Answer 1

I can give you a clue. I know it's not an answer while I need to past code block, so the comments would not work.

The error happens here:

  changeHour(step: number) {
    this.model.changeHour(step);
    this.propagateModelChange();
  }

For some reason, the model is undefined . The model value is set here:

  writeValue(value) {
    const structValue = this._ngbTimeAdapter.fromModel(value);
    this.model = structValue ? new NgbTime(structValue.hour, structValue.minute, structValue.second) : new NgbTime();
    if (!this.seconds && (!structValue || !isNumber(structValue.second))) {
      this.model.second = 0;
    }
    this._cd.markForCheck();
  }

writeValue method is part of the ControlValueAccessor interface. It is called when we bind to [ngModel] . I can not imagine how could it become undefined if this code block was executed.

Let's assume it was not executed. It could happen either if FormsModule was not exported either if there is some error happening before and prevents the writeValue execution.

I hope this would help you fix the error.