I am in the following way using the datepicker range component of angular material in formly
component class
form = new FormGroup({});
model: DashboardFilterModel = {
criteria: '',
category: undefined,
range: undefined,
};
fields: FormlyFieldConfig[] = [
{
key: 'range',
type: 'datepicker-range',
props: {
label: 'Rango',
},
},
];
component template
<form [formGroup]="form" (ngSubmit)="onSubmit(model)" autocomplete="off">
<formly-form [form]="form" [model]="model" [fields]="fields"></formly-form>
<div class="flex justify-end">
<button type="submit" mat-icon-button>
<mat-icon>filter_alt</mat-icon>
</button>
</div>
</form>
Using angular material datepicker range as formly 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),
});
constructor() {
super();
this.range.valueChanges.subscribe({
next: (value) => this.formControl.setValue(value),
});
}
}
template
<mat-form-field class="w-full">
<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>
Registering datepicker range formly type
app.module
FormlyModule.forRoot({
validators: [{ name: 'fieldMatch', validation: fieldMatchValidator }],
types: [
{ ... },
{ ... },
{
name: 'datepicker-range',
component: FormlyDatepickerRangeTypeComponent,
wrappers: [],
},
],
}),
The above works fine. But now I need to assign a default value to the datepicker component. I have unsuccessfully tried the following options updating the model
this.model = {
criteria: value.criteria,
category: value.category,
range: {
start: new Date().toISOString().split('T')[0],
end: new Date().toISOString().split('T')[0],
},
};
The above updates the model but does not reflect the value in the datepicker-range component
What is the way to assign a default value to the datepicker range component of angular material used in formly?