Angular 5绑定材料5 DatePicker到表单字段答案

【问题标题】：Angular 5 binding material 5 DatePicker to form fieldAngular 5绑定材料5 DatePicker到表单字段
【发布时间】：2018-02-12 10:38:00
【问题描述】：

我正在尝试将 Angular 材料 5 日期选择器绑定到表单字段，我正在关注官方教程 here 但没有任何关于如何将日历值绑定到表单中的字段的信息，它也可以绑定到类属性，但这也不起作用。我的模板很简单：

 <form #theForm="ngForm">
   .......Some fields.......
   <mat-form-field>
                  <input matInput [matDatepicker]="fixDate" placeholder="Choose a date" name="fixDate">
                  <mat-datepicker-toggle matSuffix [for]="fixDate"></mat-datepicker-toggle>
                  <mat-datepicker #fixDate></mat-datepicker>
              </mat-form-field>
 </form>

所以<mat-form-field> 标记中的这段模板包含表单中的输入，通过给它一个name，我希望它可以从.ts 中“捕获”，但它不会工作，我在.ts 文件中所做的是：
(click)="saveReport(theForm)"

`public saveReport(form: NgForm){
    if(confirm("Sure you wanna save?")){
      //Some non relevant validation
      let valuesFromForm = form.value;
      console.log(valuesFromForm['fixDate']);
    }
}`

这将打印undefined，但表单中的其他字段工作正常，当您给它们一个name 时，它们可以通过.ts 文件中的表单对象检索有什么建议吗？

【问题讨论】：

标签： angular datepicker angular-material

【解决方案1】：

使用响应式表单可以使用 mat-datepicker。

我的 xxx.component.html 文件如下所示。（与您的非常相似，接受响应式表单绑定）

<form [formGroup]="myForm" (ngSubmit)="save(myForm.value)">
  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Start" formControlName="date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <button mat-raised-button color="accent" [disabled]="myForm.invalid">Save</button>
</form>

在xxx.component.ts中我导入了响应式表单相关的目标FormBuilder、FormGroup、FormControl .如果你想验证，Validators。那么

myForm: FormGroup;

constructor (private fb: FormBuilder) {
  this.myForm = fb.group({
    date: ['', Validators.required]
  });
}

[...]

save(data: YourDataType) {
  /* Here you go */
}

现在您应该能够获取 data.date 作为您选择的值而不是未定义的值。至少它可以是一个空字符串，你可以通过添加验证器来防止它。当然，您必须从 @angular/material 导入 MatFormFieldModule 和 MatDatepickerModule 并将其导入您的组件相关模块中。

希望这能正确回答您的问题并有助于解决您的问题。干杯！

【讨论】：