DatePicker 无法在 Mat 对话框窗口中工作

Question

我正在尝试创建一个表单，其中包含两个使用 Angular Material 的开始/结束日期日期选择器。由于某种原因，当我在对话框窗口中的表单内添加日期选择器时，对话框的布局未正确呈现，正如从图像中可以看到的那样。这可能是什么原因造成的？

模板：

<div class="consumption-form">
    <form [formGroup]="consumptionControl" id="consumptionForm">
        <p class="consumption-field">
            <mat-form-field hintLabel="Max 10 characters" appearance="fill">
                <mat-label>BGpoint</mat-label>
                <input matInput #BGpoint maxlength="10" placeholder="BG5521900640000000000000001668712" formControlName="BGpointControl">
                <mat-error>
                    <span *ngIf="consumptionControl?.controls.BGpointControl?.errors?.pattern">Field should contain 10 numeric
          characters!</span>
                </mat-error>
                <mat-hint align="end">{{BGpoint.value?.length || 0}}/10</mat-hint>
            </mat-form-field>
        </p>
        <p class="consumption-field">
            <mat-form-field appearance="fill">
                <mat-label>Choose a start date</mat-label>
                <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
        </p>

        <button mat-raised-button type="submit" (click)="submit(BGpoint) " mat-icon-button matTooltip="Click to search for results " [matTooltipPosition]="position.value " [matTooltipShowDelay]="500
                " [matTooltipHideDelay]="500">
            <mat-icon aria-label="Search button icon ">search</mat-icon>
        </button>

    </form>
</div>

组件ts：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { TooltipPosition } from '@angular/material/tooltip';

@Component({
  selector: 'app-consumption-details',
  templateUrl: './consumption-details.component.html',
  styleUrls: ['./consumption-details.component.css']
})
export class ConsumptionDetailsComponent implements OnInit {

  myFilter = (d: Date | null): boolean => {
    const day = (d || new Date()).getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6;
  }
  
  consumptionControl: FormGroup;
  private positionOptions: TooltipPosition[] = ['after', 'before', 'above', 'below', 'left', 'right'];
  position = new FormControl(this.positionOptions[0]);
  constructor() { }

  ngOnInit(): void {
    this.consumptionControl = new FormGroup({
      BGpointControl: new FormControl('', [Validators.minLength(1), Validators.maxLength(20), Validators.pattern("*")]),
    });
  }
  submit(BGPoint:string){

  }

}

对话框窗口在屏幕左侧显示为从上到下的白色条带。

Answer 1

我知道我来晚了一点，但我刚刚遇到了和OP类似的问题。就我而言，mat-datepicker 工作得很好，直到我尝试将其放入 mat-dialog 窗口中的表单中。 尽管

MatNativeDateModule

和

MatDatepickerModule

已导入到我的模块中，但我仍然在控制台中得到

ERROR Error: MatDatepicker: No provider found for DateAdapter

。

对我有用的是在

MyModule

和

AppModule

和 中导入上述模块，同时将

MatDatepickerModule

注册为

MyModule

中的提供者。

Answer 2

对于独立组件，有时在对话框组件中导入

MatDatepickerModule

和

MatNativeDateModule

可能还不够（尽管您肯定需要这两个）。

由角度材质对话框服务实例化的组件无法访问应用程序全局注入器。这对我有帮助：

constructor(private dialog: MatDialog,
          private injector: Injector) {}

openResponseModal() {
  this.dialog.open(MyModalComponent, {
    data: {
      // ... injected data
    },
    injector: this.injector,
  });
}

Answer 3

按照@nikoswsn链接的答案，在组件的模块中导入

MatNativeDateModule

对我有用。

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
// ...


@NgModule({
    imports: [
        MatDatepickerModule,
        MatNativeDateModule,
        // ...