时间戳

首页 > 解决方案 > 以 Angular 6 反应形式预填充和验证日期

angular6 - 以 Angular 6 反应形式预填充和验证日期

问题描述

除了我的日期之外，所有其他字段都已预先填充。

出于测试目的，我将日期硬编码为 MM/DD/YYYY。

从数据库中，我会得到日期和时间，所以我需要使用管道将其设为 MM/DD/YYYY（我对此是否正确？）

组件代码

this.projectForm = new FormGroup({
  'name': new FormControl(project.ProjectName, [Validators.required, Validators.minLength(3), Validators.maxLength(20)]),
  'customerName': new FormControl(project.CustomerName, [Validators.required, Validators.minLength(3), Validators.maxLength(20)]),
  'soNo': new FormControl(project.CustomerOrderId, [Validators.required, Validators.maxLength(30)]),

  'poNo': new FormControl({ value: project.PurchaseOrderId, disabled: true }),

  'expectedDate': new FormControl({ value: project.ExpectedDate, disabled: true }), 
  'installDate': new FormControl(project.InstallDate),
  'closeDate': new FormControl(project.CloseDate),

  'status': new FormControl(project.Status, [Validators.required, ForbiddenProjectStatusValidator.forbiddenProjectStatus])
});


//setting the dates and status dropdown
this.projectForm.patchValue({
  'expectedDate': '08/17/2018',
  'installDate': '08/18/2018',
  'closeDate': '08/19/2018',
  'status': project.Status ? project.Status : "" 
});

html

<input type="date" id="expectedDate" class="form-control" placeholder="Expected Date" formControlName="expectedDate">

由于输入类型日期，浏览器显示日历控件。

所以基本上，

如何

在此处输入图像描述

更新1：

选择的答案是完美的，它详细说明了时刻的使用，但现在我已经采用了最简单的解决方案......

https://css-tricks.com/prefilling-date-input/

如何使用角度 2 将当前日期转换为 YYYY-MM-DD 格式

如何格式化 JavaScript 日期

这对我有用

expectedDate: new Date('08/08/2018').toISOString().substr(0, 10)

或当前为

expectedDate: new Date(new Date().toLocaleDateString("en-US")).toISOString().substr(0, 10)

或者

expectedDate: '2018-08-08'

日期必须是 YYYY-MM-DD。

为了验证，模式正在工作

'expectedDate': new FormControl(project.InstallDate, [Validators.pattern('[0-9]{4}-[0-9]{2}-[0-9]{2}')])

标签： angular6angular-validation

解决方案

您可以为日期定义自定义验证器。使用支持日期验证的日期时间，例如moment

import { FormControl } from "@angular/forms";
import * as moment from "moment";

export function DateValidator(format = "MM/dd/YYYY"): any {
  return (control: FormControl): { [key: string]: any } => {
    const val = moment(control.value, format, true);

    if (!val.isValid()) {
      return { invalidDate: true };
    }

    return null;
  };
}

然后在表单控件中使用

{
   ...
  'closeDate': new FormControl(project.CloseDate, [ DateValidator() ]),
}

从数据库中，我会得到日期和时间，所以我需要使用管道将其设为 MM/DD/YYYY（我对此是否正确？）

您不能在 FormControl 中使用管道。最简单的方法是在将值修补为表单之前转换为目标格式

this.projectForm.patchValue({
  'expectedDate': moment(model.expectedDate).format('MM/dd/YYYY'),
  ...
});

推荐阅读