How to prevent trigger ngModelChange event for first time?

Question

Here is my code:

import { Component } from '@angular/core';
import { Validators, FormGroup, FormArray, FormBuilder } from '@angular/forms';


@Component({

  selector: 'my-app',
  template: `
  <div id="my-div">
    <h1>Ng2 DateTime Picker French Test</h1>

    <input [(ngModel)]="myDate" 
      (change)="myChange($event)"
      (ngModelChange)="myNgModelChange($event)"
      ng2-datetime-picker
      date-only="true"/>
</div>

  `,
  styles: [`
    div { font-family: Courier; font-size: 13px}
    input { min-width: 200px; font-size: 15px; }
  `]
})
export class AppComponent {

  myDate: any = "2016-12-28";

  constructor(private fb: FormBuilder) {
    moment.locale('fr-ca');
  }

  myChange(ev) {
    alert("input field is manually changed to", ev.target.value)
  }

  myNgModelChange(value) {
    alert("ngModel is changed to " + value);
  }
}

When I load the page, it auto trigger ngModelChange event. But if i don't set myDate value, then it will not trigger event. So how to prevent ngModelChange for first time? and here is demo

Answer 1

Plunker (2)

Update (2): Extend current setup to allow for multiple dates.

1. Put everything in an array

myDates = [
  {
    id: 1, // You can have an undefined value
    value: undefined,
  },
  {
    id: 2, // You can set an initial date
    value: new Date("Thu Jan 01 2015 00:00:00 GMT-0500 (EST)"),
  },
  {
    id: 3 // You can also leave out the value
  }
];

2. Prepare the array on component creation

setup() {
  this.myDates.forEach((dateObj, i) => {
    this.myDates[i].ignored = false;
    this.myDates[i].initValue = dateObj.value;
  });
}

3. Loop through array in template

<div *ngFor="let myDate of myDates; let i = index">
  <input
    [ngModel]="myDate.value"
    (ngModelChange)="myNgModelChange($event, i)"
    ng2-datetime-picker
    date-format="DD-MM-YYYY hh:mm"
    hour="23"
    minute='59'
    date-only="true"/>
</div>

Full Component (2)

@Component({
  selector: 'my-app',
  template: `
  <div id="my-div">
    <h1>Ng2 DateTime Picker French Test</h1>

    <div *ngFor="let myDate of myDates; let i = index">
      <input
        [ngModel]="myDate.value"
        (ngModelChange)="myNgModelChange($event, i)"
        ng2-datetime-picker
        date-format="DD-MM-YYYY hh:mm"
        hour="23"
        minute='59'
        date-only="true"/>
    </div>

</div>
  `,
  styles: [`
    div { font-family: Courier; font-size: 13px}
    input { min-width: 200px; font-size: 15px; }
  `]
})
export class AppComponent {
  myDates = [
    {
      id: 1, // You can have an undefined value
      value: undefined,
    },
    {
      id: 2, // You can set an initial date
      value: new Date("Thu Jan 01 2015 00:00:00 GMT-0500 (EST)"),
    },
    {
      id: 3 // You can also leave out the value
    }
  ];

  constructor(private fb: FormBuilder) {
    moment.locale('fr-ca');
    this.setup();
  }

  setup() {
    this.myDates.forEach((dateObj, i) => {
      this.myDates[i].ignored = false;
      this.myDates[i].initValue = dateObj.value;
    });
  }

  myChange(ev) {
    alert("input field is manually changed to", ev.target.value)
  }


  myNgModelChange(value, index) {
    if (this.myDates[index].ignored || this.myDates[index].initValue === undefined) {
      alert("ngModel is changed to " + value);
    }
    this.myDates[index].ignored = true;
  }
}

Plunker (1)

Original with update (1): allows for an undefined initial date value.

1. Set the initial value

When the component loads store it's initial value like this:

this.initValue = this.myDate;

2. Ignore the first event by using a variable unless the initial value was undefined like this:

myNgModelChange(value) {
  if (this.ignoredFirstEvent || this.initValue === undefined) {
    alert("ngModel is changed to " + value);
  }
  this.ignoredFirstEvent = true;
}

Full Component (1)

@Component({
  selector: 'my-app',
  template: `
  <div id="my-div">
    <h1>Ng2 DateTime Picker French Test</h1>

    <input [ngModel]="myDate"
      (ngModelChange)="myNgModelChange($event)"
      ng2-datetime-picker
      date-format="DD-MM-YYYY hh:mm"
      hour="23"
      minute='59'
      date-only="true"/>
</div>
  `,
  styles: [`
    div { font-family: Courier; font-size: 13px}
    input { min-width: 200px; font-size: 15px; }
  `]
})
export class AppComponent {
  ignoredFirstEvent = false;
  initValue;
  myDate:any;

  constructor(private fb: FormBuilder) {
    moment.locale('fr-ca');
    this.initValue = this.myDate;
  }

  myChange(ev) {
    alert("input field is manually changed to", ev.target.value)
  }


  myNgModelChange(value) {
    if (this.ignoredFirstEvent || this.initValue === undefined) {
      alert("ngModel is changed to " + value);
    }
    this.ignoredFirstEvent = true;
  }
}