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，我希望它可以从{{1}中“捕获” }，但它不起作用，我在.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文件中的表单对象检索它们有什么建议吗？

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 。如果要验证，请使用 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 ，然后将其导入组件相关模块。

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

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

1 个答案: