Как сбросить поле даты после очистки формы

Question

У меня есть форма с полем даты. Изначально поле даты пустое. Когда пользователь выбирает дату и затем нажимает кнопку очистки, входные данные остаются там.

Я пробовал date = null и undefined, но не сработало

ц

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>

Answer 1

Библиотека ngx-mydatepicker имеет встроенную функцию для очистки даты (см. Документацию: https://github.com/kekeh/ngx-mydatepicker/blob/master/README.md#cleardate-function). #dueDatePicker="ngx-mydatepicker" определяет имя локальной переменной dueDatePicker. Вы можете использовать эту переменную для вызова встроенных функций ngx-mydatepicker (См. Документацию: https://github.com/kekeh/ngx-mydatepicker/blob/master/README.md#functions)

Затем в вашем компоненте введите dueDatePicker, используя @ViewChild и очистите дату.

import { NgxMyDatePickerDirective } from 'ngx-mydatepicker';

...

@ViewChild('dueDatePicker') dueDate: NgxMyDatePickerDirective;

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