如何从 component.ts 中获取 Material DatePicker 的选定值

Question

我有一个 html 文件形式的日期选择器。提交表单后，我需要在我的 component.ts 文件中获取日期选择器的选定值

在 html 文件中：

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<input type="text" class="datepicker" ngModel id ="from" name="from" placeholder="From :"> 
</form>

in the component.ts file:
console.log(f.value.from); 

我试过上面的代码，得到的值是未定义的。

Answer 1

添加 [(ngModel)]

<input type="text" class="datepicker" [(ngModel)]="from" id ="from" name="from" placeholder="From:">

并在 .ts 中声明

public from;

那么它应该可以在 onSubmit 函数中使用

Answer 2

查看此堆栈闪电战

https://stackblitz.com/edit/angular-dcr7ub

注意[(ngModel)]="date" 表单中的双向绑定链接到app.component.ts 中的date，尽管您可以使用反应式表单来做到这一点。

app.component.html

<form (ngSubmit)="onSubmit()" #f="ngForm">
  <div class="example-container">
  Form
    <mat-form-field>
      <input matInput [(ngModel)]="date" [matDatepicker]="picker" name="date" placeholder="Choose a date" />
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
 </div>

  <button type="submit" class="btn btn-success">Submit</button>
</form>

在实现这一点时我遇到了一些棘手的事情：

• 导入基本示例 https://material.angular.io/components/datepicker/examples 工作所需的一切需要几个谷歌并仔细检查 API 选项卡

import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatFormFieldModule, MatInputModule} from '@angular/material';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import { MatMomentDateModule } from "@angular/material-moment-adapter";

最后一个是你必须提供一个DateAdapter 来处理日期（日期选择器对此是不可知的）。

• 记得在styles.css中加入一个主题，我用过：

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

所以在我的示例中，日期是一个时刻 (https://momentjs.com/) 对象，因此 .format() 在：

  onSubmit() {
    console.log((<any>this.date).format());
  }