I am trying to integrate angular material datepicker range in formly

To this end I am doing the following:

1. I have created the following formally type

Component:

@Component({
  selector: 'app-formly-datepicker-range-type',
  templateUrl: './formly-datepicker-range-type.component.html',
  styleUrls: ['./formly-datepicker-range-type.component.scss'],
})
export class FormlyDatepickerRangeTypeComponent extends FieldType<any> {
  range = new FormGroup({
    start: new FormControl<Date | null>(null),
    end: new FormControl<Date | null>(null),
  });
}

Component template:

<mat-form-field >
  <mat-label>Rango</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" />
    <input matEndDate formControlName="end" />
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

2. Formly type registration

    FormlyModule.forRoot({
      types: [
        {
          name: "datepicker-range",
          component: FormlyDatepickerRangeTypeComponent,
          wrappers: [],
        },
      ],
    })

The new type I use as follows

in some component

form = new FormGroup({});
model: FilterModel = { category: undefined, criteria: '', range: undefined };
fields: FormlyFieldConfig[] = [
  formlyInput({ key: 'criteria', label: 'Criterio', templateOptions: {} }),
  formlySelect({
    key: 'category',
    label: 'Categoría',
    templateOptions: {
      options: this.categoriesService.getAllToFormly(),
    },
  }),
  {
    key: 'range',
    type: 'datepicker-range',
    templateOptions: {
      label: 'Rango de fechas',
    },
  },
];

in some component template

<form [formGroup]="form" (ngSubmit)="onSubmit(model)" autocomplete="off">
  <formly-form [form]="form" [model]="model" [fields]="fields"></formly-form>
  <div >
    <button type="submit" mat-icon-button>
      <mat-icon>filter_alt</mat-icon>
    </button>
  </div>
</form>

The above properly draws the form. For the category and criteria input, I obtain the values correctly, but for the range property, which is the one used by the new datepicker-range type, the value is always undefined.

How can I get the selected values in the date range in the form model?

Thanks in advance

CodePudding user response：

Subscribe to range form group events and set the parent form control when range value changes

export class FormlyDatepickerRangeTypeComponent extends FieldType<any> {
  range = new FormGroup({
    start: new FormControl<Date | null>(null),
    end: new FormControl<Date | null>(null),
  });

  constructor() {
    super();
    this.range.valueChanges.subscribe((v) => this.formControl.setValue(v));
  }
}