Reputation: 151

change event not getting fired in angular 6

Hi i am calling method onchange event but for calender input it is not getting applied.Below is the code.[(change)="makeDirty()"].It is working for description textbox but not working for date picker textbox.

    <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>

Upvotes: 0

Answers (4)

Chellappan வ

Reputation: 27303

Try ES6 setter

The set syntax binds an object property to a function to be called when there is an attempt to set that property.

Inside setter function place makeDirty method it will be called whenever the input value change

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');
  }
}

Example:https://stackblitz.com/edit/ngx-bootstrap-datepicker-uyskw9

Upvotes: 0