admin管理员组文章数量:1323560
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
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
Share Improve this question edited Dec 29, 2016 at 5:15 Charles asked Dec 29, 2016 at 1:10 CharlesCharles 1232 gold badges2 silver badges9 bronze badges 6- Doesn't make sense, you're changing it but you want it not to change ? – Milad Commented Dec 29, 2016 at 2:06
- What do you want to achieve ? – Milad Commented Dec 29, 2016 at 2:06
- @Milad i just initialize the value, i think it not to change ,i init myDate value,then it trigger ngModelChange event – Charles Commented Dec 29, 2016 at 2:39
- what should I expect to see in ? it doesn't alert for the first time, I don't know what's the issue – Milad Commented Dec 29, 2016 at 2:46
- here is :plnkr.co/edit/… – Charles Commented Dec 29, 2016 at 5:14
1 Answer
Reset to default 4Plunker (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 ponent 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 ponent 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;
}
}
本文标签: javascriptHow to prevent trigger ngModelChange event for first timeStack Overflow
版权声明:本文标题:javascript - How to prevent trigger ngModelChange event for first time? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742118248a2421571.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论