Angular6 以Angular 6被动形式预填充和验证日期

除date for me外，所有其他字段都已预填充

出于测试目的，我将日期硬编码为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

或当前作为

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

或

日期必须为YYYY-MM-DD

对于验证，该模式正在运行

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

---

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

时刻

从“@angular/forms”导入{FormControl}”；
从“时刻”导入*作为时刻；
导出函数DateValidator（format=“MM/dd/YYYY”）：任何{
return（control:FormControl）：{[key:string]：any}=>{
const val=力矩（control.value，格式，true）；
如果（！val.isValid（））{
返回{invalidDate:true}；
}
返回null；
};
}

然后在表单控件中使用它

{
...
“closeDate”：新的FormControl（project.closeDate，[DateValidator（）]），
}

从数据库中，我将获得日期和时间，因此我需要使用管道将其设置为MM/DD/YYYY（我的说法正确吗？）

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

this.projectForm.patchValue({
“expectedDate”：矩（model.expectedDate）.format（'MM/dd/YYYY'），
...
});

谢谢验证部分。我没有安装时刻，这意味着我必须

npm安装时刻--save

。我不能没有片刻吗？即使在patchValue中，我已经硬编码了日期，但它并没有显示在控件中。为什么会这样？安装哪一个-建议？1. <代码>https://medium.com/@jek.bao.choo/steps-to-add-moment-js-to-angular-cli-f9ab28e48bf02<代码>https://www.npmjs.com/package/angular2-moment只需使用

npm安装--节省时间

。只需将其用作库，无需注入到angular中。您可以使用RegExp进行验证，而无需使用矩.js。然而，“时刻”有许多用于日期操纵的助手。就用它吧，我还在争论这个时刻，我不需要这个项目。点击，这就是对我有效的

expDate:new Date（'08/08/2018'）.toISOString（）.substr（0,10）

或当前为

expDate:new Date（new Date（）.toLocaleDateString（'en-US'））.toISOString（）.substr（0,10）

expDate:'2018-08-08'日期必须是YYYYYY-MM-DD。为了验证，模式有效

pattern=”[0-9]{4}-[0-9]{2}-[0-9]{2}”

我已经用您的验证和使用时刻创建了一个测试台。这里有一件事1）日期只预先填充为

时刻（project.ExpectedDate）。格式（“YYYY-MM-DD”）

2）验证只在从日历中选择时触发3）手动输入日期时，提交值总是空的

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

expectedDate: '2018-08-08' 

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