如何防止首次触发 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 呢？这是演示

Answer 1

笨蛋 (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;
  }
}

笨蛋 (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;
  }
}