带有 [ngmodel] 的 Angular 材料 2 日期选择器

Posted 2023-02-22

【中文标题】带有 [ngmodel] 的 Angular 材料 2 日期选择器

【英文标题】：Angular material 2 datepicker with [ngmodel]

【发布时间】：2018-06-11 16:58:45

【问题描述】：

我正在尝试将我的日期属性绑定到 mat-datepicker 的输入，作为反应式表单组的一部分。我的所有方法都不起作用，因为除非表单有效，否则我的提交按钮被设置为禁用：

<mat-form-field fxFlex>
  <input matInput [matDatepicker]="datepicker1" placeholder="Start Date" formControlName="startingDate" required>
  <mat-datepicker-toggle matSuffix [for]="datepicker1"></mat-datepicker-toggle>
  <mat-datepicker touchUi="true" #datepicker1></mat-datepicker>
</mat-form-field>

组件.ts：

start: Date.now()
startDate: "1/1/2018"
this.ShiftForm = new FormGroup(
  startingDate: new FormControl(this.startDate),
  startTime: new FormControl(),
  endingDate: new FormControl(this.endDate),
  endTime: new FormControl(),
);

无效的方法：

将[(ngModel)]="startDate" 添加到输入字段 在输入字段中添加[ngModel]="startDate" 使用值预加载 formControl：startingDate: new FormControl(this.startDate),

部分但不令人满意的方法：

将[value]="startDate" 添加到输入字段：显示日期但反应式表单未读取，这意味着我的提交按钮仍然禁用，因为表单无效。为了使其有效，我必须手动设置日期（键入或使用日期选择器） 在从输入字段中删除 [matDatepicker]="datepicker1" 时添加 [ngModel]="startDate"：显示日期但删除对日期选择器的访问。

我只需要 [ngModel] 正常工作，以便响应式表单读取它。

帮助非常感谢！

编辑 这是我的表单组：

this.ShiftForm = new FormGroup(
  startingDate: new FormControl(this.startDate),
  startTime: new FormControl(),
  endingDate: new FormControl(this.endDate),
  endTime: new FormControl(),
);

这是 html：

<form [formGroup]="ShiftForm" fxLayout="column" fxLayoutAlign="center stretch">
<mat-form-field fxFlex>
  <input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [formControlName]="startingDate" required>
  <mat-datepicker-toggle matSuffix [for]="datepicker1"></mat-datepicker-toggle>
  <mat-datepicker touchUi="true" #datepicker1></mat-datepicker>
</mat-form-field>
..
..
..
</form>

这是我现在得到的错误：

错误：找不到具有未指定名称属性的控件

【参考方案1】：

Angular 提供了两种使用表单的方式：template-driven 或 reactive。您将这两者混合在一起，而您应该选择要使用哪一个。文档可以指导您进行此选择。

如果您选择模板驱动，您可以使用[(ngModel)]（如您的方法1）。

<input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [(ngModel)]="startDate" required>

startDate = new Date();

选择响应式，您可以在控制器中使用 [formControl] 和 FormControl（如您的方法 3）。

<input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [formControl]="startDate">

startDate = new FormControl(new Date(), Validators.Required);
// Use `startDate.value` to get the value of the control

如果您不知道自己在做什么，切勿使用[value]，否则会产生意想不到的结果。

【讨论】：

我试过<input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [formControlName]="startDate">但得到一个错误：Cannot find control with name: '1/2/2018'

您正在使用 formControlName 而您应该使用 formControl，除非您使用的是 FormGroup。然后像我发布的那样在控制器中分配一个 FormControl 到 startDate 。查看我链接到的响应式表单指南，它有很多示例。

奇怪的是它是 FormGroup 的一部分。我编辑了上面的代码

从您的 formControlName 绑定中移除 []s。它现在正在尝试绑定到不存在的控制器属性startingDate。您需要将其绑定到 FormControls 名称的字符串：formControlName="startingDate" 或 [formControlName]="'startingDate'"。

这让我回到第 1 步：使用此设置，由于某种原因，值不显示