Angular 5装订材料5 DatePicker形成字段 [英] Angular 5 binding material 5 DatePicker to form field

问题描述

我正在尝试将Angular Materials 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文件中的form对象来检索它们. 有什么建议吗?

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屋！