如何从Angular4中的日期选择器中获取值？

Question

我是Angular的新手。我使用的是Angular4材质日期选择器，下面是我的日期选择器代码

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

我的问题是，当我从Component的日期选择器中选择日期时，如何获取日期选择器的价值？

Answer 1

您可以使用反应形式。首先设置formBuilder像这样

constructor(  private fb: FormBuilder) {}

现在生成FormControls

public generateFormContorls() {
    this.myForm = this.fb.group({
      due_date: ['']
    });

现在你需要设置formControlName =“”due_date“。像这样

  <md-input-container>
            <input mdInput [mdDatepicker]="dueDate" formControlName="due_date" (click)="dueDate.open()"
              (focus)="dueDate.open()">
            <button mdSuffix [mdDatepickerToggle]="picker"></button>
          </md-input-container>
          <md-datepicker #dueDate></md-datepicker>

现在只需使用此功能即可获得该值。

console.log(" value:",this.myForm.get("due_date").value);