Question

我有一个搜索组件，该组件根据Angular中日期选择器中设置的日期过滤结果。

当用户在销售期选择元素（search.component.html）上选择日期时，我想在日期选择器组件中显示星期数，而不是在输入的日期选择器中更改值（ date-picker.component.html）。我提供了相关代码的片段：

Search.component.html：

<mat-form-field>
  <mat-select 
    [placeholder]="Sales Period" (selectionChange)="onSalesPeriodChange($event)">
    <mat-option *ngFor="let option of salePeriodOptions" [value]="option" class="sales-period-option">
      <span>{{option.id}} </span><span>{{option.dateFrom | date: 'yyyy-MM-dd'}} - {{option.dateTo | date: 'yyyy-MM-dd'}}</span>
    </mat-option>
  </mat-select>
</mat-form-field>

<form [formGroup]="formGroup">
  <div class="date-panel">
    <div class="date-control">
      <mat-checkbox formControlName="isDateFromEnabled"></mat-checkbox>
      <app-date-picker [formGroup]="formGroup"
      dateControlName="dateFrom"></app-date-picker>
    </div>

    <div class="date-control">
      <mat-checkbox formControlName="isDateToEnabled"></mat-checkbox>
      <app-date-picker [formGroup]="formGroup"
        dateControlName="dateTo"></app-date-picker>
    </div>
  </div>

date-picker.component.html

<form [formGroup]="formGroup">
  <mat-form-field>
    <input
      matInput
      [matDatepicker]="picker"
      [placeholder]="placeholder"
      [formControlName]="dateControlName"
      (change)="emitValue()"
      (keydown.Enter)="keyDownEnter($event)"
    />

    <mat-datepicker-toggle
      matPrefix
      [for]="picker"
      [disabled]="disabled"
    ></mat-datepicker-toggle>

    <mat-datepicker
      #picker
      (closed)="emitValue()"
      [disabled]="disabled"
    ></mat-datepicker>

    <span matSuffix *ngIf="value"
      >Week
      {{ value | date: 'ww' }}
    </span>

    <button
      mat-icon-button
      matSuffix
      [tooltip]="Clear"
      (click)="clear()"
      [disabled]="disabled"
    >
      <i class="icon-menu-close"></i>
    </button>
  </mat-form-field>
</form>

如(change)事件中所述，当emitValue()输入的日期选择器中的值发生更改时，可以已经设置星期。

date-picker.component.ts

export class DatePickerComponent implements OnInit, OnChanges {
      @Input() dateControlName: string;
      @Input() formGroup: FormGroup;
      @Input() value: Moment;
      @Output() valueChange: EventEmitter<Moment> = new EventEmitter<Moment>();

      emitValue() {
        if (this.dateControl) {
          this.value = this.dateControl.value;
          this.valueChange.emit(this.value);
        }
      }
    private get dateControl() {
       return this.formGroup.controls[this.dateControlName];
     }
}

用户还可以从销售期间中选择日期，该选项列出了按期间过滤的日期选项。但是，它仅通过调用OnSalesPeriodChange()方法在日期控件中设置日期，而不会触发输入元素（(change)）的date-picker.component事件。

Search.component.ts

onSalesPeriodChange(period: MatSelectChange) {
    this.formGroup.controls.dateFrom.setValue(period.value.dateFrom);
    this.formGroup.controls.dateTo.setValue(period.value.dateTo);
  }

在销售期选择元素中设置日期，从而设置周中的值后，如何调用方法emitValue()？我是Angular和Angular Material的新手，正在研究有关它的一些代码。任何与此相关的回应都将对我有很大帮助。

通过另一个选择元素

0 个答案: