0

怎么了：

  1. 我打开抽屉/滑出，我看到我的输入和日期选择器
  2. 单击日期选择器并选择一个日期
  3. 日期选择器关闭，我的带有日期选择器的抽屉/滑轨也会关闭

如果我重新打开幻灯片，价值仍然存在。但是，在我选择一个日期后，我需要除日期选择器之外的所有东西保持打开状态。是否有一个我找不到的替代方法可以确保一旦日历关闭，其他所有内容都保持打开状态？

代码！

Task.html（滑出/抽屉）：

<div>
  <div class="content-heading">
    Edit Item
  </div>
  <div class="p">
    <form role="form" [formGroup]="editForm">
      <app-input placeholder="Name" formControlName="name" name="name"></app-input>
      <app-datepicker label="Start Date" formControlName="deadline"></app-datepicker>
      <app-datepicker label="End Date" formControlName="complete"></app-datepicker>
      <app-input placeholder="Notes" formControlName="notes" name="notes"></app-input>
    </form>
  </div> 
</div>

日期选择器.html

<div class="app-datepicker">
  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="{{label}} [formControl]="control" (dateChange)="onClick($event)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</div>

日期选择器.ts

import { Component, forwardRef, Input, OnInit, ViewChild} from '@angular/core';
import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR} from '@angular/forms';
import {SettingsService} from '@app/core/settings/settings.service';
import * as _moment from 'moment';
import { Moment } from 'moment';

@Component({
  selector: 'app-datepicker',
  templateUrl: './app-datepicker.component.html',
  styleUrls: ['./app-datepicker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AppDatepickerComponent),
      multi: true
    }
  ]
})
export class AppDatepickerComponent implements OnInit, ControlValueAccessor {
  @ViewChild('picker') picker;
  private cvaValue;
  @Input() label: string;

  control: FormControl = new FormControl(null);
  onChange = (value: Date) => {};
  onTouched = () => {};

  constructor(private settingsService: SettingsService) { }

  ngOnInit() { }
  
  get value() {
    return this.cvaValue;
  }

  set value(value: Date) {
    this.cvaValue = value;
    this.control.setValue(value);
  }

  writeValue(value: Date): void {
    if (value !== undefined && value !== null) {
      this.control.setValue(value);
    }
  }

  registerOnChange(fn: (value: Date) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  onClick(event: any) {
    const d : Moment = event.value;
    this.onChange(new Date(d.toDate()));
    this.value = new Date(d.toDate());
  }
}

提前致谢！

4

0 回答 0