时间戳

首页 > 解决方案 > 如何将模板驱动的验证和 ngbDatePicker 属性添加到 anguar 7 中的输入字段？

angular - 如何将模板驱动的验证和 ngbDatePicker 属性添加到 anguar 7 中的输入字段？

问题描述

我正在尝试将模板驱动的验证添加到也是一个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 次用于 datepicker。

但它抛出以下错误：

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

有什么方法可以让我完成这项工作，我可以在其中弹出日期选择器并需要对其进行验证？

标签： angularvalidationangular7ngb-datepicker

解决方案

您已经为ngbDatepicker和ngModel 定义了#arrivalDate。将ngbDatepicker的模板引用名称更改为其他名称，例如-

 #arrivalDateInput = "ngbDatepicker"

而在点击方法改变这样 -

(click)="arrivalDateInput.toggle()"

因为，当您在最后将到达日期绑定到 ngModel 时，它正在寻找 ngModel 中的 toggle() 函数。但是 ngModel 没有这样的属性。

推荐阅读