Angular material 2 datepicker with [ngmodel]

时间:2018-01-01 21:19:53

标签: javascript angular forms datepicker material-design

我正在尝试将我的日期属性绑定到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:

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

不起作用的方法:

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

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

    1. [value]="startDate"添加到输入字段:显示日期但未被活动表单读取,这意味着我的提交按钮仍然处于禁用状态,因为表单无效。为了使其有效,我必须手动设置日期(键入或使用日期选择器)
    2. 从输入字段中删除[ngModel]="startDate"时添加[matDatepicker]="datepicker1":显示日期,但删除了对日期选择器的访问权限。
    3. 我需要的是[ngModel]正常工作,以便Reactive Form读取它。

      非常感谢!

      修改 这是我的formGroup:

      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>
      

      这是我现在得到的错误:

        

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

2 个答案:

答案 0 :(得分:8)

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

如果您选择模板驱动,则可以使用[(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]

答案 1 :(得分:0)

解决了, 感谢@Manduro帮助我完成了这个

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

最终,这是我为使其发挥作用而添加的内容。

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

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>