Как получить выбранное значение Material DatePicker из component.ts

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


I have tried the above code and the value I get is undefined.

Answer 1

Посмотри этот стек

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

Обратите внимание на двустороннюю привязку в форме [(ngModel)]="date" ссылки на date в app.component.ts, хотя вы можете сделать это с помощью реактивных форм.

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() in:

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

Answer 2

Добавить [(ngModel)]

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

И в .ts объявить

public from;

тогда это должно быть доступно в функции onSubmit