1

I am using mydatepicker for showing date now I want to set date in input box for this I am using that code:-

    <my-date-picker  formControlName="myDate" [(ngModel)]="task.taskDateFormatted" [options]="myDatePickerOptionsinput" (calendarToggle)="onCalendarToggle($event)"  (dateChanged)="onDateChanged($event,task._id)" >
    </my-date-picker> 

When I am using one date picker its working correct and set the value. But when I am using for multiple date-picker and each have different date then its showing error message.

    [(ngModel)]="task.taskDateFormatted" 

I am using this syntax for setting date in input box. I am using this date picker https://www.npmjs.com/package/mydatepicker2 .

This is the error message :-

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '17 Jan 2019'. Current value: '16 Jan 2019' this is screenshot:-

https://www.screencast.com/t/etEFtqyq9

Thank you

15
  • Hello @Mangita. Could you please post your html and js code? Commented Jan 17, 2019 at 11:08
  • @AbhijeetChakravorty from here you can check my html file codehttps://jsfiddle.net/dfo1e0t4/ Commented Jan 17, 2019 at 11:30
  • I will have a look at it. Commented Jan 17, 2019 at 11:32
  • @AbhijeetChakravorty jsfiddle.net/uhsxocLt this is server side code from where we are getting application tasks Commented Jan 17, 2019 at 11:33
  • I believe you are in need of dynamic ngModels. Currently you have the same ngModel for all the <my-date-picker></my-date-picker> unless you have all different values for "task.taskDateFormatted". Are all the values dynamic? Commented Jan 17, 2019 at 11:46

1 Answer 1

1

Html code:

<p>
  application-detail works!
</p>

<form [formGroup]="myForm" novalidate>
  <my-date-picker id="input-zero"  [options]="myDatePickerOptions" formControlName="myDateZero" (dateChanged)="onDateChanged($event)">
  </my-date-picker>
  <my-date-picker id="input-one" [options]="myDatePickerOptions" formControlName="myDateOne" (dateChanged)="onDateChanged($event)">
  </my-date-picker>
  <my-date-picker id="input-two" [options]="myDatePickerOptions" formControlName="myDateTwo" (dateChanged)="onDateChanged($event)">
  </my-date-picker>
  <my-date-picker id="input-three" [options]="myDatePickerOptions" formControlName="myDateThree" (dateChanged)="onDateChanged($event)">
  </my-date-picker>
  <my-date-picker id="input-four" [options]="myDatePickerOptions" formControlName="myDateFour" (dateChanged)="onDateChanged($event)">
  </my-date-picker>
</form>

Angular Code:

import {
        Component,
        OnInit
} from '@angular/core';

import {
        IMyOptions
} from 'mydatepicker';

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

@Component({
        selector: 'app-application-detail',
        templateUrl: './application-detail.component.html',
        styleUrls: ['./application-detail.component.css']
})
export class ApplicationDetailComponent implements OnInit {
        private checkData: Object;
        private myForm: FormGroup;
        private myDatePickerOptions: IMyOptions = {
                // other options...
                dateFormat: 'dd.mm.yyyy',
        };

        constructor(private formBuilder: FormBuilder) {}

        ngOnInit() {
            this.checkData = {
                a: new Date(),
                b: new Date(),
                c: new Date(),
                d: new Date(),
                e: new Date()
            }
                this.myForm = this.formBuilder.group({
                        myDateZero: ['', Validators.required],
                        myDateOne: ['', Validators.required],
                        myDateTwo: ['', Validators.required],
                        myDateThree: ['', Validators.required],
                        myDateFour: ['', Validators.required]
                        // other controls are here...
                });
        }

        onDateChanged(ev) {
                // You will be able to check the changed dates here.
            console.log(ev);
        }

        setDate(): void {
                // Set today date using the setValue function
                let date = new Date();
                this.myForm.setValue({
                        myDateOne: {
                                date: {
                                        year: date.getFullYear(),
                                        month: date.getMonth() + 1,
                                        day: date.getDate()
                                }
                        }
                });
        }

        clearDate(): void {
                // Clear the date using the setValue function
                this.myForm.setValue({
                        myDate: ''
                });
        }
}
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.