Question

您好，我正在调用方法onchange事件，但是对于日历输入，它没有得到应用。下面是代码。[（change）=“ makeDirty（）”]。它适用于描述文本框，但不适用于日期选择器文本框

    <div class="form-group mb-10">
      <label class="formLabel">Description</label>
      <input type="text" (change)="makeDirty()" class="form-control bg-grey" [(ngModel)]='description' [ngModelOptions]="{standalone:true}">
    </div>

    <div class="form-group mb-10">
        <label class="formLabel">Period</label>
        <input type="text" (change)="makeDirty()" placeholder="select start date and end date" class="form-control bg-grey" #dp="bsDaterangepicker"
          bsDaterangepicker [(ngModel)]="bsRangeValue" [placement]="'top'" [outsideClick]="false" [bsConfig]="{  showWeekNumbers:false,containerClass: 'theme-dark-blue',rangeInputFormat: 'DD/MM/YYYY' }"
          formControlName="Period">
        <span class="glyphicon glyphicon-calendar glyicon" (click)="dp.toggle()" [attr.aria-expanded]="dp.isOpen"
          value="Toggle" style="top:36px"></span>
        <div class="alert  alert-danger" *ngIf="formGroup.get('Period').dirty && formGroup.get('Period').errors && formGroup.get('Period').errors.ageRange ">
          Date range selected is invalid
        </div>
      </div>

Answer 1

使用(bsValueChange)进行日期选择。查看文件

https://valor-software.com/ngx-bootstrap/#/datepicker#value-change-event

Answer 2

如果您使用的是ngModel，则可以使用（ngModelChange）。

Answer 3

使用（输入）代替（更改）。

Answer 4

尝试 ES6设置器

set语法将对象属性绑定到要调用的函数尝试设置该属性时。

在setter函数的内部放置makeDirty方法，只要输入值更改，它将被调用

component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  set myDateValue(value) {
    this.makeDirty();
  };
  ngOnInit() {
    // this.myDateValue = new Date();
  }

  onDateChange(newDate: Date) {
    console.log(newDate);
  }

  makeDirty() {
    console.log('Called');
  }
}

示例：https://stackblitz.com/edit/ngx-bootstrap-datepicker-uyskw9

更改事件未在角度6中触发

4 个答案: