Angular2 - 在反應形式上設置日期字段

Question

我有一個使用兩個日期字段的組件，一個開始日期 & 和結束日期。

默認情況下，我禁用了結束日期字段，並在他們選擇開始日期時切換它。

this.transitionForm = this.fb.group({
 effectiveEndDate: [{ value: '', disabled: true }]
 ..... 
});

我正在嘗試在我的代碼中設置此結束日期字段的值。

this.transitionForm.controls['effectiveEndDate'].setValue(this.utils.currentDate());

實用功能：

/**
 * Returns the current date
 */
currentDate() {
    const currentDate = new Date();
    const day = currentDate.getDate();
    const month = currentDate.getMonth() + 1;
    const year = currentDate.getFullYear();
    return month + "/" + day + "/" + year;
}

HTML：

<input type="date" class="form-control input-sm" id="effectiveEndDate" name="effectiveEndDate" placeholder="Required" formControlName="effectiveEndDate">

出於某種原因，該字段並沒有得到更新。

我也嘗試過使用PatchValue並且也沒有設置它。

我錯過了什么？

Answer 1

當您在 Chrome（其他瀏覽器未測試）中運行此代碼時，它會向控制台記錄一個錯誤：

指定的值“7/26/2017”不符合要求的格式“yyyy-MM-dd”。

我認為這很好地描述了這個問題

您可以通過將currentDate()方法更改為以下內容來修復它：

currentDate() {
  const currentDate = new Date();
  return currentDate.toISOString().substring(0,10);
}

現場plunker示例

雖然這確實解決了問題，但@JGFMK 的答案顯示了使用DatePipe轉換日期的更好方法

Answer 2

FormBuilder.group 返回 FormGroup：
https://angular.io/api/forms/FormBuilder#group
https://angular.io/api/forms/FormGroup#setValue

更新：

• 此處討論了在 Typescript 中使用 Angular Pipe。
• 語言環境討論： navigator.language 。
• 實例化一個日期管道
• Angular 中日期的討論。
• 日期管道文檔和源代碼。

---

import {DatePipe} from '@angular/common'
...
let dp = new DatePipe(navigator.language);
let p = 'y-MM-dd'; // YYYY-MM-DD
let dtr = dp.transform(new Date(), p);
this.transitionForm.setValue({effectiveEndDate: dtr}); 

---

Plunker 示例（只需點擊重置）

Answer 3

Angular 有多種方式來處理和管理表單。 並非所有方法甚至所有配置都會在視圖中顯示值。 我已經嘗試了幾個選項，到目前為止我最喜歡的是一個像這樣配置的反應式表單，因為它簡單、干凈、靈活、支持驗證並且會在視圖中顯示值。

在您的組件中，您需要從@angular/forms導入FormBuilder和FormGroup 。 您可以選擇導入Validators作為驗證每個表單字段的一種方式。

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

在組件的其余部分，我們需要定義一個 FormGroup 類型的新變量： transitionForm: FormGroup 。

然后我們需要使用構造函數注入使fb可用作FormBuilder ： constructor(public fb: FormBuilder) ，並將字段名稱添加到我們的 FormBuilder 變量中： this.transitionForm = fb.group({ ... });

export class EgComponent implements OnInit {
  transitionForm: FormGroup;

  constructor(public fb: FormBuilder) {
    this.transitionForm = fb.group({
      'effectiveEndDate': [''],
      ...
    });
  }
  ...
}

您可以通過多種方式設置日期。 在這里，我們將使用 ngInit 設置它

ngOnInit() {
  const currentDate = new Date().toISOString().substring(0, 10);
  this.transitionForm.controls['transitionForm'].setValue(currentDate);
}

對於您的表格，您只需要：

<form (ngSubmit)="onSubmit(transitionForm)" [formGroup]="transitionForm" novalidate>
  <input type="date" formControlName="effectiveEndDate">
  ...
  <button type="submit" [disabled]="transitionForm.invalid">Submit</button>
</form>

由於此方法使用ReactiveForms您需要確保將其添加到@NgModule

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    FormsModule,
    ReactiveFormsModule
  ],
...

除了使數據在視圖中可見，這樣做還允許更清晰的 html 表單布局和簡單的驗證。 您完全不需要 ngModel 和表單名稱標簽。

您可以直接將數據傳遞給您的方法(ngSubmit)="onSubmit(transitionForm)"並且由於它是一個FormGroup您的表單數據也可以作為this.transitionForm.value

Answer 4

<input formControlName="loadActivationTime" [value]="transitionForm .get('effectiveEndDate').value | date: 'dd/MM/yyyy hh:mm'"   readonly="readonly" matInput placeholder="effectiveEndDate">