CODEWITHSUNDEEP
angulardatetimeionic-frameworkform-control
aabll_
aabll_

Reputation: 3

Ionic datetime only gives back initialized values

I am currently working on the development of an Ionic-Angular-app. For this I need a datetime component on a page, which should adjust the creation date of an object. For this I use formGroup, but when I select another date I always get the date initialized in the form.

Code from ts.file

ngOnInit() {
  this.activatedRoute.paramMap.subscribe(paramMap => {
    if (!paramMap.has('axleCounterId')) {
      return;
    }
    const axleCounterId = paramMap.get('axleCounterId');
    this.loadedAxleCounter = this.homeService.getAxleCounter(axleCounterId);
  });

  this.form = new FormGroup({
    date: new FormControl(this.loadedAxleCounter.creationDate, {
      updateOn: 'blur'
    }),
    dateTest: new FormControl(null, {
      updateOn: 'change'
    })
  })
}

Code from html:

<form [formGroup]='form'>
  <ion-item lines=none>
    <ion-avatar slot=start>
      <ion-icon *ngIf=loadedAxleCounter.creationDate name=checkmark-circle color=success size=large></ion-icon>
    </ion-avatar>
    <ion-label>
      <div style="white-space: normal; ">
        <h2>Date</h2>
        <h3>
          <ion-datetime id=datePickerPadding [pickerOptions]=customOption formControlName=date></ion-datetime>
        </h3>
      </div>
    </ion-label>
  </ion-item>
</form>

does anyone see at first glance where my mistake is, or can anyone help me? Many thanks in advance

Upvotes: 0

Views: 471

Answers (1)

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5051

ion-datetime component internally updating the value property to the changed value in it's own handler method. You can check at ion-datetime

But here we are using custom click handlers. So from our side manually need to patch form value. Done handler will give an event object on click. Which contains Day, Month, Year. So you can do something like below.

handler: (event) => {
  this.form.get('date').patchValue(new Date(event.day.text + "-" + event.month.text + "-" + event.year.text).toDateString());
  console.log(this.form.value);
}

Forked and working Demo

Upvotes: 1

Related Questions