angular 8 ngx-formly datetimepicker

Question

i'm trying to make datetimepicker by ngx-formly

After i read all the examples in offical docs , i still have no idea how to make it.

Is there any custom form field or build in datetimepicker?

Answer 1

The docs for custom field type https://formly.dev/guide/custom-formly-field, to summarize here are the required steps:

1. Create a custom field type with name datetimepicker:

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
 selector: 'formly-datetimepicker',
 template: `
   <datetimepicker [formControl]="formControl"></datetimepicker>
 `,
})
export class DatetimepickerFieldType extends FieldType {}

2. define your field type through the NgModule declaration:

@NgModule({
 declarations: [DatetimepickerFieldType],
 imports: [
   ....
   FormlyModule.forRoot({
     types: [
       { name: 'datetimepicker', component: DatetimepickerFieldType },
     ],
   }),
 ],
})
export class AppModule {}

3. set type to type in your field config:

fields = [
  {
    key: 'datetimepicker',
    type: 'datetimepicker',
  },
]

still confused check formly UI source code https://github.com/ngx-formly/ngx-formly/tree/master/src/ui