如何在提交表单后保留选定的日期？

Question

我在表单中使用 ng-bootstrap 日期选择器。我需要在提交表单后保留选定的日期选择器值。当前日期选择器值在表单提交后为空（重置）。如何保留选定的日期选择器值？

<form class="form-inline" name="form" #invoiceheaderform="ngForm" novalidate (ngSubmit)="invoiceheaderform.form.valid && save();">

开始日期 *

    <div class="input-group">
    <input class="form-control ngbfield" 
           name="invfromdate"  [readonly]="true" #vl="ngModel" [(ngModel)]="model.fromDate" ngbDatepicker #d1="ngbDatepicker">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary fa fa-calendar" (click)="d1.toggle()" type="button"></button>
    </div>
    <!-- <div *ngIf="invoiceheaderform.submitted && vl.invalid" class="invalid-feedback">From Date is required</div> -->
  </div>

  <button type="submit" [disabled]="disableRunButton" class="btn btn-primary mb-2 expad">Save</button>

</form>

Answer 1

<div class="input-group">
  <input class="form-control ngbfield" name="fromDate"  [readonly]="true" #vl="ngModel" [(ngModel)]="model.fromDate" ngbDatepicker #d1="ngbDatepicker">
<div class="input-group-append">
  <button class="btn btn-outline-secondary fa fa-calendar" (click)="d1.toggle()" type="button"></button>
</div>

Answer 2

问题可能是模型值在提交时被重置，并且由于这些值受 ngModel 约束，所以日期值也被重置

对于提交，与其像上面那样直接调用保存，不如考虑将事件作为 save($event) 传递并从保存函数内部调用 event.preventDefault()

Answer 3

检查您是否在 save() 函数中修改模型值 (model.fromDate)。由于它是一个日期，您可能会在 save() 函数中更改日期格式并分配回同一变量。如果是的话，使用另一个变量来存储修改后的值。

如何在提交表单后保留选定的日期？

How to keep selected date after form submission?

javascript

ng-bootstrap

angular