0

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?

1 Answer 1

0

You can use either of the possiblity to set default value for a date-picker component in your angular component

  1. using defaultDate = {default_value} property in your element where you have defined and consume the component.
  2. If you need to assign a default value from the parent component, then you can take help of reference template and then in .ts file using reference of form controls use "patchValue" method to relevant form controls and assign the default value.

-I hope this resolves your issue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.