[使用Angular时如何在字段中显示日期

Question

我想通过使用表单从用户那里获取一些输入值，并将其保存在数据库中。然后，我要使用相同的表单显示保存的数据。但是，即使我从这些输入字段中获得了值，也无法在此处显示检索到的值；

<input type="date" name="ArrivalDate" #ArrivalDate="ngModel" [(ngModel)]="service.formData.ArrivalDate" class="form-control">

和

<input type="date" name="DepartureDate" #DepartureDate="ngModel" [(ngModel)]="service.formData.DepartureDate" class="form-control">

Screenshot: Display retrieved data from the database but date fields are not filled with the necessary data

/ -----代码段----- /

<div class="form-row">
            <div class="form-group col-md-4">
              <div class="form-group">
                  <label>Arrival Date</label>
                  <!--I want to get the date input from the user-->
                  <!--I want to display the date input which given by the user-->
                  <input type="date" name="ArrivalDate" #ArrivalDate="ngModel" [(ngModel)]="service.formData.ArrivalDate" class="form-control">
                  <div class="validation-error" *ngIf="ArrivalDate.invalid && ArrivalDate.touched">This field is required.</div>
              </div>
            </div>
            <div class="form-group col-md-4">
              <div class="form-group">
                  <label>Departure Date</label>
                   <!--I want to get the date input from the user-->
                  <!--I want to display the date input which given by the user-->
                  <input type="date" name="DepartureDate" #DepartureDate="ngModel" [(ngModel)]="service.formData.DepartureDate" class="form-control">
                  <div class="validation-error" *ngIf="DepartureDate.invalid && DepartureDate.touched">This field is required.</div>
              </div>
            </div>
            <div class="form-group col-md-4">
                <div class="form-group">
                  <label>Star Category</label>
                  <input name="StarCategory" #StarCategory="ngModel" [(ngModel)]="service.formData.StarCategory" class="form-control">
                  <div class="validation-error" *ngIf="StarCategory.invalid && StarCategory.touched">This field is required.</div>
              </div>
            </div>
        </div>

Answer 1

您可以尝试这样。这是带有2个日期字段的最小形式。您可以添加其余字段。

在组件模板中]

<form [formGroup]="dateForm" (ngSubmit)="onSubmit()">

  <label>
    Arrival Date:
    <input type="date" formControlName="ArrivalDate">
  </label>

  <label>
    Departure Date:
    <input type="date" formControlName="DepartureDate">
  </label>
  <input type="submit" />
</form>

<label> Arrival Date: {{dateForm.get("ArrivalDate").value}}</label>

<label> Departure Date: {{dateForm.get("DepartureDate").value}}</label>
在组件中

  import { FormGroup, FormControl } from "@angular/forms";

  arrivalDate : Date = new Date();
  departureDate : Date = new Date();
  dateForm = new FormGroup({
    ArrivalDate: new FormControl(this.arrivalDate.toISOString().split("T")[0]),
    DepartureDate: new FormControl(this.departureDate.toISOString().split("T")[0])
  });

  onSubmit(){
    console.log(this.dateForm.value);
  }
stackblitz中的工作示例：https://stackblitz.com/edit/angular-xkgxxt

Answer 2

问题是浏览器的默认日期选择器只能显示带有日期部分的日期字符串（而不是日期对象）（没有时间）。