angular 引导日期选择器输入添加 styles 通过单击

Question

我正在尝试通过单击将 styles 应用于输入。 当我按下它时，我需要在字段周围有一个橙色框，如果我使用焦点，那么它会被使用一会儿，然后在它移动到日历字段时消失。 我以这种方式解决了这个问题。

        <div class="input-group">
          <input id="dateOfReceipt" class="form-control date calendar_input pl-4" name="dp" ngbDatepicker #dR="ngbDatepicker"
                 [readOnly]="true"
                 [minDate]="dateOfReceiptStart"
                 [markDisabled]="markDisabled"
                 [placeholder]="bus.seat.fields.jobOfferBodyFields.dateOfReceipt ?
                 bus.seat.fields.jobOfferBodyFields.dateOfReceipt : datePickerPlaceholder"
                 [(ngModel)]="bus.seat.fields.jobOfferBodyFields.dateOfReceipt"
                 [disabled]="!bus.isEdit" (click)="dR.toggle(); showDatepickerBorder('dateOfReceipt')"
                 (dateSelect)="onDateOfReceiptDateSelect($event)"
                 [ngClass]="{'focus-border': datePickerInputFocusBorder.dateOfReceipt}">
          <div class="input-group-append">
            <button class="btn calendar-button" type="button"
                    [disabled]="!bus.isEdit" (click)="dR.toggle(); showDatepickerBorder('dateOfReceipt')">
              <mat-icon class="calendar-icon">calendar_today</mat-icon>
            </button>
          </div>
        </div>


  showDatepickerBorder(key: string) {
    this.datePickerInputFocusBorder[key] = true;
  }

  hideDatepickerBorder(obj) {
    for (let prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        obj[prop] = false;
      }
    }
  }

  @HostListener('document:click', ['$event']) clickOutside(event) {
    if (!this.eRef.nativeElement.contains(event.target)) {
      this.hideDatepickerBorder(this.datePickerInputFocusBorder);
    }
  }

我怎样才能让它更容易？

Answer 1

你可以简单地询问“dR.isOpen()” -dR 是你使用的模板引用变量 - 并使用 [ngClass] 如果你有

input.form-control:focus, .focus-border{
    box-shadow: 0 0 0 .2rem rgba(255,140,0,.25);
    border:orange
}

您可以使用

<input class="form-control" ngbDatepicker #dR="ngbDatepicker"
         [ngClass]="dR.isOpen()?'focus-border':null" ...  >