angular - How to reset to default value bsDateRangePicker

Question

I'm trying to create reactive forms with Angular 9. And also I use ngx-bootstrap

I'm trying to use daterangepicker, when I use form.reset() function, function clears the input field. But I just want to reset it to default value.

When page loaded, it shows me default value. But if I reset it, it does not.

Here it is my html file:

<form id="myForm" [formGroup]="myForm" class="form-group p-2">
<div class="input-group ">
<input value="null" type="text" 
       class="form-control" formControlName="dateRange"                                         
       #dp="bsDaterangepicker" bsDaterangepicker 
       [bsConfig]="{ rangeInputFormat : 'DD.MM.YYYY, HH:mm:ss', dateInputFormat: 'DD.MM.YY, 
       HH:mm:ss',showWeekNumbers: false, isAnimated: true, containerClass: 'theme-blue' } ">
</div>
<button type="button" (click)="clearAllForms()" class="btn btn-danger">Clear</button>
</form>

and ts file:

this.myForm = this.formBuilder.group({
      dateRange: new FormControl([
        new Date(this.currentDate.setDate(this.currentDate.getDate() - 7)),
        new Date()
      ])})

clearAllForms(){
     myForm.reset()
}

How to reset it to default value. Is that possible?

Thanks in Advance

Answer 1

pass in the wanted default values (here an array of Dateobject) as a map inside the reset method, where key is the form control name and value the value of the control.

clearAllForms(){
  this.myForm.reset({
    dateRange: [new Date(), new Date()]
  });
}