无法使用表单组获取离子日期时间的值

时间:2019-02-15 18:23:16

标签: angular ionic-framework

我正在使用Ionic 4.0.1angular 7。我正在尝试在表单组中使用ion-datetime,但似乎无法检索该值。 Trip是我用作模态的组件。我究竟做错了什么?

家庭组件

async onAddTrip(year: number) {
   const modal = await this.modalCtrl.create({
     component: TripComponent,
     componentProps: {year: year},
   });
   return await modal.present();
}

home模块

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    TripModule,
  ],
  declarations: [
      HomePage
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
})
export class HomePageModule {}

TripModule

@NgModule({
  declarations: [
    TripComponent,
  ],
  entryComponents: [
    TripComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  exports: [
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],

})

export class TripModule { }

trip.html

<form [formGroup]="form">  
  <ion-item>
    <ion-label position="stacked" color="primary">Start Date</ion-label>
    <ion-datetime
            name="start_date"
            display-format="MMM DD, YYYY"
            [min]="year"
            [max]="year"
            formControlName="start_date"
            ngDefaultControl
    >

    </ion-datetime>
  </ion-item>

  <ion-button fill="outline" color="primary" expand="block" (click)="onSave(form.value)">Save</ion-button>

</form>

旅行组件

form: FormGroup;
year = "2019";

constructor(private builder: FormBuilder) {
this.form = builder.group({
  'start_date': [],
});

onSave(data: TripInterface) {
    console.log(data);  // every other form field shows a value except start_date
    console.log(this.form.value); // again every other form field shows a value except start_date
    console.log(this.start_date); // no value
}

0 个答案:

没有答案