Как прочитать дату из DatePicker Угловой материал - PullRequest
Новая
       17

Как прочитать дату из DatePicker Угловой материал

1 голос
/ 03 октября 2019

У меня есть приложение на Angular 8 и форма поиска. Таким образом, пользователь может выбрать дату с помощью выбора даты. И тогда вызов API будет искать эту дату.

Но сейчас я получу эту ошибку: 

ExtendedSearchComponent.html:41 ERROR TypeError: Cannot read property 'toString' of undefined

thml выглядит так: 

  <div class="search-fields-inputs">
      <mat-form-field class="search-field-input">
        <input matInput [matDatepicker]="startDate" placeholder="sinds" [(ngModel)]="startDate.date" />
        <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
        <mat-datepicker #startDate  [(ngModel)]="startDate.date" ngDefaultControl (selectedChanged)="onDate($event)"></mat-datepicker>
      </mat-form-field>
    </div>

кнопки: 

 <div fxFlex="none">
        <div fxLayout="row">
          <div class="is-grouped">
            <button mat-raised-button color="accent" class="Button" (click)="searchFor()">Zoek</button>&nbsp;
            <button mat-raised-button color="secondary" class="Button">Clear</button>
          </div>

      </div>
    </div>

и код ts выглядит так: 


startDate: Date;
 // endDate: Date;

  constructor( private participantService: ParticipantService) {}

  ngOnInit() {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes.searchExtended) {
      this.searchExpanded = changes.searchExtended.currentValue;
    }
  }

/*   public onDate(event): void {
    this.startDate.date = event;
    this.getData(this.roomsFilter.date);
  } */

  searchFor( filterRegistration : FilterByRegistrationDTO) {

   console.log(this.participantService.filterParticipantsByRegistration(1, "Invited", this.startDate.toString()).subscribe(result => {
  //  this.startDate = filterRegistration.start.value;
   console.log(result);
   console.log(this.startDate);


   }));


  }

Спасибо

, если я сделаю это: 


  <div class="search-fields-inputs">
      <mat-form-field class="search-field-input">
        <input matInput [matDatepicker]="startDate" placeholder="sinds" [(ngModel)]="startDate" />
        <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
        <mat-datepicker #startDate  [(ngModel)]="startDate" ngDefaultControl (selectedChanged)="onDateChanged()"></mat-datepicker>
      </mat-form-field>
    </div>

Я получаю эту ошибку: 

core.js:12584 ERROR Error: Uncaught (in promise): Error: Cannot assign to a reference or variable!
Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js._AstToIrVisitor.visitPropertyWrite (compiler.js:6440)

1 Ответ

1 голос
/ 03 октября 2019

Вы не присвоили startDate ни одному значению, вы должны получить еще одну ошибку, говорящую о том, что не может прочитать «дата» из неопределенного. Также это не нужно, вы можете напрямую связать переменную 'startDate' с ngModel.

Заменить [(ngModel)]="startDate.date" на [(ngModel)]="startDate"

Я создал здесь форк - https://stackblitz.com/edit/angular-5r6u3p

component.html 

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [(ngModel)]="startDate">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

 <button mat-raised-button color="accent" class="Button" (click)="searchFor()">Search</button>

component.ts 

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/** @title Datepicker selected value */
@Component({
  selector: 'datepicker-value-example',
  templateUrl: 'datepicker-value-example.html',
  styleUrls: ['datepicker-value-example.css'],
})
export class DatepickerValueExample {
  startDate: Date;

  searchFor() {
   console.log(this.startDate.toString());
   };
}
...