Javascript 带 [ngmodel] 的角形材料 2 日期选择器

Angular material 2 datepicker with [ngmodel]

提问by shuk

I am trying to bind my date property to mat-datepicker's input as part of a reactive form group. All of my methods didn't work, as my submit button is set to disabled unless the form is valid:

我试图将我的日期属性绑定到 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>

Component.ts:

组件.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(),
});

Methods which didn't work:

不起作用的方法：

1. Adding [(ngModel)]="startDate"to input field
2. Adding [ngModel]="startDate"to input field
3. Preloading the formControl with the value: startingDate: new FormControl(this.startDate),

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

Methods which partially but not satisfyingly worked:

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

1. Adding [value]="startDate"to input field: date showed but not read by the Reactive Form, meaning my submit button remains disabled as the form is not valid. To make it valid, I have to set the date manually (typing or using the datepicker)
2. Adding [ngModel]="startDate"while removing [matDatepicker]="datepicker1"from the input field: date showed but removing the access to the datepicker.

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

All I need is the [ngModel] to work as it should so the Reactive Form reads it.

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

Help much much appreciated!

非常感谢帮助！

EDITThis is my formGroup:

编辑这是我的表单组：

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

This is the HTML:

这是 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>

This is the Error I get now:

这是我现在得到的错误：

Error: Cannot find control with unspecified name attribute

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

回答by Manduro

Angular provides two ways of using forms: template-drivenor reactive. You're mixing those two up, while you should choose which one you want to use. The docs can guide you in this choice.

Angular 提供了两种使用表单的方式：模板驱动或反应式。您将这两者混合在一起，而您应该选择要使用的那个。文档可以指导您进行此选择。

Should you choose template-driven, you can use [(ngModel)](like your method 1).

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

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

startDate = new Date();

Choose reactive and you can use [formControl]with a FormControlin your controller (like your method 3).

选择反应式，您可以在控制器中使用[formControl]a 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

Never use [value]if you don't know what you're doing or it will give you unexpected results.

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

回答by shuk

Resolved, Thank you @Manduro for helping me walk through this

已解决，谢谢@Manduro 帮助我解决这个问题

this.startDatewas a string, while the Datepicker only translates Dates.

this.startDate是一个字符串，而 Datepicker 只翻译日期。

Eventually, this is what I added to make it work.

最终，这是我添加的内容以使其工作。

startingDate: new FormControl(moment(this.startDate).format())

HTML:

HTML：

<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>