Question

我有一个使用两个日期字段的组件，一个开始日期＆amp;和结束日期。

默认情况下，我的结束日期字段已禁用，我在选择开始日期时将其切换。

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

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

更新：

在Typescript中使用Angular Pipe会议here。
Discussion for locale：navigator.language。
Instantiate a Date Pipe
关于Dates in Angular的讨论。
日期管道docs和source code。

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 example (just hit reset)

Answer 2

当您在Chrome中运行此代码（未经测试的其他浏览器）时，它会向控制台记录错误：

指定值“7/26/2017”不符合所需格式“yyyy-MM-dd”。

我认为这个问题很好地描述了

您可以通过将currentDate()方法更改为以下内容来解决此问题：

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

Live plunker example

虽然确实解决了问题，但the answer from @JGFMK显示了使用DatePipe

转换日期的更好方法

Answer 3

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

Angular2 - 在被动表单上设置日期字段

3 个答案: