CODEWITHSUNDEEP
angulardatepicker
queue
queue

Reputation: 309

How to reset the date field when form is cleared

I have a form with a date field. Initially, the date field is empty. When the user selects a date and then clicks the clear button, the input data stays there.

I tried date=null and undefined but didnt work

ts

private clearValues(row: RecordDto) {
  row.Date= null
  row.contactName = null
}

html

<ng-container matColumnDef="Date" >
    <div class="date-picker-container" >
      <input class="date-picker form-control" ngx-mydatepicker
             (dateChanged)="onDueDateUpdate($event, row)"
             [options]="datePickerOptions" #dueDatePicker="ngx-mydatepicker"
             [errorStateMatcher]="matcher"
             [appRequiredIf]="selection.isSelected(row)"/>
      <button type="button" mat-button class="button-calendar"
              (click)="dueDatePicker.toggleCalendar()"
              [disabled]="row.taskName.notApplicable"></button>
    </div>
  </mat-form-field>
</td>
</ng-container>

Upvotes: 0

Views: 2901

Answers (1)

nash11
nash11

Reputation: 8650

The ngx-mydatepicker library has an inbuilt function to clear the date (See documentation: https://github.com/kekeh/ngx-mydatepicker/blob/master/README.md#cleardate-function). #dueDatePicker="ngx-mydatepicker" defines the local variable name dueDatePicker. You can use this variable to call the inbuilt functions of ngx-mydatepicker (See documentation: https://github.com/kekeh/ngx-mydatepicker/blob/master/README.md#functions)

Then in your component, access dueDatePicker using @ViewChild and clear the date.

import { NgxMyDatePickerDirective } from 'ngx-mydatepicker';

...

@ViewChild('dueDatePicker') dueDate: NgxMyDatePickerDirective;

private clearValues(row: RecordDto) {
  this.dueDate.clearDate();
  row.contactName = null;
}

Upvotes: 1

Related Questions