angular - DatePicker 在 Mat Dialog 窗口中不起作用
问题描述
我正在尝试创建一个表单,其中包含两个使用 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){
}
}
Dialog 窗口在屏幕左侧显示为从上到下的白色条带。
解决方案
我知道我参加聚会有点晚了,但我刚刚遇到了与 OP 类似的问题。在我的情况下,mat-datepicker 工作正常,直到我尝试将它放入 mat-dialog 窗口中的表单中。即使MatNativeDateModule
并且MatDatepickerModule
被导入到我的模块中,我仍然进入ERROR Error: MatDatepicker: No provider found for DateAdapter
控制台。
对我有用的是在两者中导入上面的模块,MyModule
并在.AppModule
MatDatepickerModule
MyModule
推荐阅读
- javascript - 查找最活跃的用户(每天)
- reactjs - 如何使用谷歌日历 API 创建一个新的谷歌会议
- ios - 在 iOS 上的 Chrome 中禁用第三方 cookie
- javascript - 因异常 TypeError 暂停:document.getElementById(...) is null
- mathematical-optimization - 最优碱基对偶值
- asp.net - 如何在不使用脚本的情况下从 ASP.NET 创建新的 SQL Server 数据库
- javascript - 如何使用 chart.js 删除图表实例
- sql - postgres 更新的性能问题
- python - 图片格式不对?
- python - 通过 Librosa 检测发病时间