[英]Angular material 2 datepicker with [ngmodel]
I am trying to bind my date property to mat-datepicker's input as part of a reactive form group. 我试图将我的日期属性绑定到mat-datepicker的输入作为反应形式组的一部分。 All of my methods didn't work, as my submit button is set to disabled unless the form is valid:
我的所有方法都不起作用,因为我的提交按钮被设置为禁用,除非表单有效:
<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: Component.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: 无效的方法:
[(ngModel)]="startDate"
to input field [(ngModel)]="startDate"
到输入字段 [ngModel]="startDate"
to input field [ngModel]="startDate"
到输入字段 startingDate: new FormControl(this.startDate),
startingDate: new FormControl(this.startDate),
预加载startingDate: new FormControl(this.startDate),
Methods which partially but not satisfyingly worked: 部分但不令人满意的方法:
[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. [value]="startDate"
到输入字段:日期显示但未被Reactive Form读取,这意味着我的提交按钮仍然处于禁用状态,因为表单无效。 To make it valid, I have to set the date manually (typing or using the datepicker) [ngModel]="startDate"
while removing [matDatepicker]="datepicker1"
from the input field: date showed but removing the access to the datepicker. [matDatepicker]="datepicker1"
[ngModel]="startDate"
时添加[ngModel]="startDate"
:显示日期但删除了对datepicker的访问权限。 All I need is the [ngModel] to work as it should so the Reactive Form reads it. 我只需要[ngModel]就可以正常工作,以便Reactive Form读取它。
Help much much appreciated! 非常感谢!
EDIT This is my formGroup: 编辑这是我的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
错误:找不到具有未指定名称属性的控件
Angular provides two ways of using forms: template-driven or reactive . Angular提供了两种使用表单的方式: 模板驱动或反应 。 You're mixing those two up, while you should choose which one you want to use.
你把它们混合起来,而你应该选择你想要使用的那个。 The docs can guide you in this choice.
文档可以指导您进行此选择。
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 FormControl
in your controller (like your method 3). 选择被动,您可以在控制器中使用
[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
Never use [value]
if you don't know what you're doing or it will give you unexpected results. 如果您不知道自己在做什么,或者它会给您带来意想不到的结果,请不要使用
[value]
。
Resolved, Thank you @Manduro for helping me walk through this 解决了,谢谢@Manduro帮助我解决这个问题
this.startDate
was a string, while the Datepicker only translates Dates. this.startDate
是一个字符串,而this.startDate
只翻译日期。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.