While resetting the form custom object with start and end changed to null

Question

Am using ngx-daterangepicker-material DaterangePicker component with the Angular 2 form. Within the form am trying to reset the component. on that case the custom object with start and end changed to null within the form json.

The Initial value type of the Component before form reset :

let range: any = {start:new Date('2/2/2017'), end:new Date('3/3/2017')}

this.form = this.formBuilder.group({

  customrange: [range, [Validators.minLength(3)]],

});

  "customrange": {

    "startDate": "2018-07-16T18:30:00.000Z",

    "endDate": "2018-08-21T18:29:59.000Z"

  }

After the form rest the custom object changed to null:

{ 
  "customrange": null,
}

Whether it is a behaviour or anything workaround to fix this.

Demo link: https://stackblitz.com/edit/angular-hjem9h?file=src%2Fapp%2Fapp.component.ts

Reference link: https://fetrarij.github.io/ngx-daterangepicker-material/full

Hi @Justinas, //HTML <input type="text" matInput ngxDaterangepickerMd formControlName="customrange" name="customrange" /> <div> <button type="reset" class=" btn btn-primary" (click)="ResetForm() "> Reset </div> ngOnInit() { let range: any = {start:new Date('2/2/2017'), end:new Date('3/3/2017')} this.form = this.formBuilder.group({ customrange: [range, [Validators.minLength(3)]], }); } // Rest Handler ResetForm(args: any) { this.form.reset(); } — Thirukumarn.Murugan

Chrillewoodz Chrillewoodz · Accepted Answer · 2018-07-10T10:18:48

This is how reset function works. You need to pass the object which you want the reset function to set the new value to instead of null.

So just do:

this.form.get('customrange').reset(range);

While resetting the form custom object with start and end changed to null

1 Answers