angular 6 反应形式和输入类型日期格式答案

【问题标题】：angular 6 reactive form and input type date formatangular 6 反应形式和输入类型日期格式
【发布时间】：2022-02-18 21:40:07
【问题描述】：

在我的 Angular 6 应用程序中，我正在开发一个反应式联系表单，其中我有一个日期字段，用户可以在其中输入出生日期，在 .html 文件中我有以下代码。

<input type="date" formControlName="dob"/>

在 .ts 文件中我的代码为：

this.contactForm= this.fb.group({
 dob:[''],
})

现在的问题是，当用户选择日期时，数据的格式是根据他/她的系统给出的，但是，我想将其设置为 MM/DD/YYYY 格式，所以我添加了一个占位符在日期输入如下 <input type="date" placeholder="MM/DD/YYYY"> 但这也不起作用。

谁能帮我如何独立设置日期格式系统？

【问题讨论】：

【解决方案1】：

验证

因此，当您创建 FormGroup 时，您可以传入验证方法和/或约束，其中有几个可以看到。

我假设您想在提交表单时验证用户输入。

 postalCode: [
    address?.postalCode,
    [
      Validators.pattern("YOUR REGEX"),
      Validators.required
    ]
  ],

在此示例中，我正在创建子组 postalCode，它包含地址对象上属性 postalCode 的默认值（如果它不为空）。

然后作为第二个参数，我传入一个验证选项数组，第一个是 REGEX 模式验证约束，它将字符串值作为模式。从那里您可以实现适用于您所需日期格式的正则表达式模式。

还有其他预定义的验证方法见此。 https://angular.io/api/forms/Validators

如果您想呈现验证错误消息等，也可以这样做https://angular.io/guide/form-validation

我希望对您有所帮助，如果您遇到问题，请不要害怕询问。

正在转换

您还可以使用内置的 formatDate 函数转换从表单提交的日期

导入格式日期

import { formatDate } from '@angular/common';

formatDate(DateToBeFormated, Format, LOCALE (EN / DE) 什么的)

this.form = this.formBuilder.group({
  date: [formatDate(date, 'yyyy-MM-dd', 'en' [Validators.required]],});

例如

【讨论】：

我不确定验证是否可以控制占位符和日期输入的呈现方式，
我不太了解您的问题，如果它与将日期转换为特定格式 mm/dd/yyyy 或我可以推荐的 angulars DatePipe angular.io/api/common/DatePipe
对于其他类似日期的操作，还有 moment.js 库
我已经添加了对 formatDate 部分的简短说明，如果那不是你想要的，我现在真的不知道你在做什么：D
我不想在提交表单后进行格式化，每当用户输入日期时，它应该是 MM/DD/YYYY 并且占位符应该是 MM/DD/YYYY 它不应该是我的系统日期格式，当前的问题是，即使我保留 MM/DD/YYYY 的占位符，它也会显示 2022 年 2 月 16 日。