CODEWITHSUNDEEP
angularionic-frameworkionic4angular-forms
Karan
Karan

Reputation: 555

Get value from ionic time-picker inside an angular form

I'm trying to fetch the inserted date value from the ionic date-picker which resides inside an angular form. But every time I submit the value it returns null.

<form [formGroup]="formData" (ngSubmit)="onSubmit()">
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>Select date</ion-card-subtitle>
    </ion-card-header>
    
    <ion-card-content>
      <ion-item>
        <ion-icon name="calendar-outline"></ion-icon>
        <ion-datetime display-format="DD/MM/YYYY HH:mm" style="margin-left: 70px;"></ion-datetime>
        <ion-input formControlName="dateEvent"></ion-input>
      </ion-item>
    </ion-card-content>
  </ion-card>

  <ion-button type="submit" expand="block"> Send </ion-button>
</form>

export class SegnalazioneWizardIonicComponent extends  CommonDirective implements OnInit {
  
  public formData: FormGroup

  ngOnInit(): void {
    this.formData = new FormGroup({
      dateEvent: new FormControl,
    });
  }

  onSubmit(){
    console.log(this.formData.value);
  }

}

The result I'm getting in the console is:

dateEvent: null

Upvotes: 0

Views: 1816

Answers (1)

user796446
user796446

Reputation:

You have not attached the formControl to your datetime object. You must add the formControlName attribute like so:

<ion-datetime display-format="DD/MM/YYYY HH:mm" formControlName="dateEvent"></ion-datetime>

There is no need for ion-input

Upvotes: 2

Related Questions