Angular 5 绑定材料 5 DatePicker 到表单域

Question

我正在尝试将 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，我希望它可以从 'catchable' .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文件中的表单对象检索 有什么建议吗？

Answer 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。和验证器，如果你想验证。然后

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并将其导入到您的组件相关模块中。

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