Angular 5 绑定材料 5 DatePicker 到表单域 [英] Angular 5 binding material 5 DatePicker to form field

问题描述

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

I am trying to bind an Angular materials 5 date picker to a form field, i am following the official tutorial here but there isn't any information about how to bind the calendar value to a field within a form, it could also be bound to a class attribute, but that also does not work. My template is simply:

 <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)"

So this piece of template within the <mat-form-field> tags, consists of an input within a form, by giving it a name, i would expect it to be 'catchable' from the .ts, but it does not work, what i do in the .ts file is:
(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 文件有什么建议吗?

This prints undefined, but other fields in the form work just fine, when you give them a name they are retrievable via the form object in the .ts file Any advise?

推荐答案

使用响应式表单对我使用 mat-datepicker 进行以下工作.

Using reactive forms the following works for me using mat-datepicker.

我的 xxx.component.html 文件如下所示.(非常类似于你的接受反应形式绑定)

My xxx.component.html file looks for example like follows. (Very similar to yours accept the reactive forms bindings)

<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.那么

in the xxx.component.ts I import the reactive forms related targets FormBuilder, FormGroup, FormControl. And Validators if you want to validate. Then

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

Now you should be able to grab data.date as your selected value not beeing undefined. At least it can be an empty string, which you can prevent by adding validators. Of course you have to import the MatFormFieldModule and MatDatepickerModule from @angular/material and import it in your component related module.

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

Hope this answers your question properly and helps for solving your problem. Cheers!

这篇关于Angular 5 绑定材料 5 DatePicker 到表单域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！