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

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

更新:

• 这里讨论在Typescript中使用Angular Pipe .
• 讨论区域:navigator.language.
• 实例化日期管道
• 关于角度日期的讨论.
• 日期管道文档和源代码.

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 2

当您在Chrome(其他未经测试的浏览器)中运行此代码时,它会向控制台记录错误:

指定值"7/26/2017"不符合所需格式"yyyy-MM-dd".

我认为这个问题非常好

您可以通过将currentDate()方法更改为以下内容来修复它:

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

直播的例子

虽然这确实解决了问题,但@JGFMK的答案显示了使用a转换日期的更好方法DatePipe

Answer 3

Angular 有多种方式来处理和管理表单。并非所有方法甚至所有配置都会在视图中显示值。我已经尝试了几个选项，到目前为止我最喜欢的是一个像这样配置的反应式表单，因为它简单、干净、灵活、支持验证并且会在视图中显示值。

在您的组件中，您需要导入FormBuilder和FormGroup从@angular/forms. 您可以选择导入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