如何設置我的反應式表單日期輸入值？

Question

所以我試圖顯示這個日期以供輸入。 但是在我的表單構建器組中設置它的值時它沒有顯示。 我也希望能夠格式化它。

this.post.startDate 是 Date 類型

.ts 中有什么

this.editForm = this.formBuilder.group({
      startDate: [this.post.startDate, Validators.compose([Validators.required])],
      endDate: [this.post.endDate, Validators.compose([Validators.required])]
    });

我的反應形式有這個

<form [formGroup]="editForm" (ngSubmit)="saveDate()">

        <label>Start Date: </label>
        <input type="date" formControlName="startDate" name="startDate" />

        <br />
        <label>End Date: </label>
        <input type="date" formControlName="endDate" name="endDate" />

        <br /><br />
        <input type="submit" value="Create Date">

      </form>

Answer 1

您有兩種可能將日期設置為默認值。

變體 1：

要將默認日期值設置為日期類型的<input>標記，您應該使用 input-tag 的 HTML 屬性value 。

例子：

<form [formGroup]="editForm2">
    <input type="date" formControlName="startDate" value="{{ post.startDate | date:'yyyy-MM-dd' }}">
    <input type="date" formControlName="endDate" value="{{ post.endDate | date:'yyyy-MM-dd' }}">
</form>

變體 2（推薦）：

您可以在角度使用內置函數formatDate() 。

步驟1：

從組件打字稿文件中的@angular/common導入formatDate() 。

import { formatDate } from '@angular/common';

注意： formatDate(yourDate, format, locale)需要 3-4 個參數。

第2步：

在表單組的定義中格式化您的日期。

this.editForm = this.formBuilder.group({
      startDate: [formatDate(this.post.startDate, 'yyyy-MM-dd', 'en'), [Validators.required]],
      endDate: [formatDate(this.post.endDate, 'yyyy-MM-dd', 'en'), [Validators.required]]
});

這是工作示例： https ://stackblitz.com/edit/angular-kucypd

這是輸入類型日期的文檔： https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Answer 2

試試內置的formatDate包。

import { formatDate } from '@angular/common' 

然后轉換您的日期並將其設置為日期選擇器控件

this.yourForm.controls.controlName.setValue(formatDate(date,'yyyy-MM-dd','en'));

Answer 3

另一種解決方案，功能更強大的 w 時區偏移，添加綁定和格式轉換：

.html：

<form [formGroup]="form">
<input type="date" class="form-control" (change)="onMyDateChange($event)" name="myDate" formControlName="myDate" value="{{ actualDateFormGroup | date:'yyyy-MM-dd' }}" >
</form>

.ts：

 actualDateFormGroup = new Date(new Date().getTime() - (new Date().getTimezoneOffset() * 60000)).toISOString().split("T")[0];

 onMyDateChange(event: any) {
    this.forma.patchValue({ myDate: event.target.value });
  }

然后可以在代碼中根據需要修改myDate變量中獲取的格式。

例如：2019-10-13 至 20191013

 stringFormat(string){
  let date = fechaString.replace(/-/g, '');
  return date;
  }

finalDate = stringFormat(myDate);

Answer 4

我有這個問題。 我的解決方案是：

// another code on constructor ....
this.form = new FormGroup({
  createdDate: new FormControl('', Validators.required),
  expiredDate: new FormControl('', Validators.required),
  // more fields....
});

……

然后，在另一個時刻，我得到了 coupon.createdDate 上的日期值...

    this.form.get('createdDate').setValue(new Date(coupon.createdDate).toISOString().split('T')[0]);

就這樣。

Answer 5

為輸入類型 datetime-local 設置輸入日期值雖然有效，但即

 <input id="endDate" type="datetime-local" class="form-control />

並在控制器中

 this.form.patchValue({
                endDate: this.schoolEvent.endDate
            });

所以，如果你需要一個日期時間輸入，你可以使用上面的。