Блог

Я пытаюсь добавить проверку на основе шаблона в поле ввода, которое также является ngbDatePicker .

 <div class="form-group row">
        <label for="receiver" class="col-sm-4 control-label font-weight-bold mt-1">Arrival Date/Time</label>
        <div class="col-sm-2 mt-4">
          <input type="text" [(ngModel)]="singleEntryData.arrivalDate" id="arrivalDate"
            class="form-control border-right-0" placeholder="mm-dd-yyyy" dateFormat="mm-dd-yyyy" ngbDatepicker
            #arrivalDate="ngbDatepicker" [minDate]="minDate" style="font-size: 0.9rem " #arrivalDate="ngModel" required
            readonly />
          <div *ngIf="!arrivalDate.valid">
            <div *ngIf="arrivalDate.errors.required" class="text-danger">
              Please Enter a Arrival Date
            </div>
          </div>
        </div>
        <div class="col-sm-1 float-left mt-4 ml-0 pl-0">
          <button class="btn btn-outline-secondary" (click)="arrivalDate.toggle()" type="button">
            <fa-icon [icon]="faCalendar" id="calendar-addon-from" class="fa-xs"></fa-icon>
          </button>
        </div>
      </div>
  

Здесь #arrivalDate используется 2 раза при вводе, 1 для проверки, 1 для выбора даты.

Но это выдает следующую ошибку:

 ERROR TypeError: jit_nodeValue_9(...).toggle is not a function
    at Object.eval [as handleEvent] (ng:///AdminModule/ReceivingEntryUpdateComponent.ngfactory.js:529)
    at Object.handleEvent (vendor.js:49061)
    at Object.handleEvent (vendor.js:49606)
    at dispatchEvent (vendor.js:46520)
    at vendor.js:46964
    at HTMLButtonElement.<anonymous> (vendor.js:65219)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:7189)
    at Object.onInvokeTask (vendor.js:42618)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:7188)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:6956)
defaultErrorLogger @ vendor.js:40476
  

Есть ли какой-либо способ заставить это работать, чтобы я мог вызвать всплывающее окно выбора даты и выполнить для него необходимую проверку?

Вы определили #ArrivalDate как для ngbDatepicker, так и для ngModel. Измените имя ссылки на шаблон для ngbDatepicker на что-то другое, например-

  #arrivalDateInput = "ngbDatepicker"
  

И в методе click измените следующим образом-

 (click)="arrivalDateInput.toggle()"
  

Потому что, поскольку вы привязываете ArrivalDate к ngModel в последнем, поэтому он ищет функцию toggle() в ngModel. Но у ngModel такого свойства нет.