javascript - 如何防止第一次触发 ngModelChange 事件？

Question

这是我的代码:

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

当我加载页面时，它会自动触发 ngModelChange 事件。但是如果我不设置 myDate 值，那么它不会触发事件。那么第一次如何防止 ngModelChange 呢？这是demo

Answer 1

Plunker (2)

更新 (2):扩展当前设置以允许多个日期。

1。把所有东西放在一个数组中

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。在创建组件时准备数组

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

3。遍历模板中的数组

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

完整组件 (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)

原始更新 (1):允许使用 undefined 初始日期值。

1。设置初始值

当组件加载时存储它的初始值是这样的:

this.initValue = this.myDate;

2。使用变量忽略第一个事件，除非初始值未定义，如下所示:

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

完整组件 (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;
  }
}