angular-material 相关问题

Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。

Angular 材料日期选择器：日期解析 UTC 问题 1 天前

我知道有几个关于此问题的线程，我阅读了所有这些线程，但好几天都无法解决此问题。我可能找到了一个解决方案，但它似乎对我来说很脏。所以和其他用户一样，我也有同样的问题

angular typescript datepicker angular-material utc

回答 4 投票 0

使用角度 5 设置角度材质 datePicker 的默认值

我正在使用有角材料的日期选择器。我想设置一个默认值，但它没有显示该值。我正在使用有角材料的日期选择器。我想设置一个默认值，但它没有显示该值。 <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input matInput [picker]="picker" placeholder="Date" autocomplete="off" name="date" formControlName="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker [startAt]="startDatePicker" #picker></mat-datepicker> </mat-form-field> 这是我的 .js 代码，我想将其设置为默认值 var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); this.form = this.formBuilder.group({ dataInicial: [data_inicial], ... 这对我有用！ HTML- <mat-form-field> <input matInput [matDatepicker]="picker1" placeholder="From Date" [formControl]="date1"> <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> </mat-form-field> TS- date1 = new FormControl(new Date()) 您需要为 startAt 更改提供一个 Date 对象，如下所示：在.ts中： date = new Date((new Date().getTime() - 3888000000)); 在 html 中： <mat-datepicker [startAt]="date" #picker></mat-datepicker> 这里有一个工作演示：https://stackblitz.com/edit/angular-n9yojx 您可以在输入中使用定义的 formControl。这里是html <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date" [(ngModel)]="date.value"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 这里是TS 声明你 formControl date: FormControl; this.date = new FormControl(new Date(<you can provide you date input field if you getting date from other sources>)) 下面是 Angular 10、Angular Material 10 和 Reactive forms 的工作代码组件.ts this.youForm= this._formBuilder.group({ StartDate: [new Date(), Validators.required], }); component.html 没有变化 <mat-form-field appearance="outline"> <input matInput [matDatepicker]="StartDate" placeholder="Start date *" formControlName="StartDate"> <mat-label>Start Date *</mat-label> <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle> <mat-datepicker #StartDate></mat-datepicker> </mat-form-field> 在一组表单控制器中，您可以使用默认日期，如下所示。 birthdayCtrl: ['1999-01-31'] 使用模板驱动方法，解决方案如下。 selectedDate = new Date(); <input class="form-control" matInput [matDatepicker]="dp3" [min]="today" [max]="max" disabled [(ngModel)]="selectedDate" (ngModelChange)="dateUpdated()" name="currentDate" /> <mat-datepicker-toggle matSuffix [for]="dp3" ></mat-datepicker-toggle> <mat-datepicker #dp3 disabled="false"></mat-datepicker> ``` 在你的.html中---- <mat-form-field style="width:150px;" color="accent"> <mat-label>Choose From Date</mat-label> <input class="example-events" matInput [matDatepicker]="picker1" [ngModel]="dateF" > <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1 ></mat-datepicker> </mat-form-field> 在你的.ts中---- dateF:any=new Date(); ngModel 对我有用... var date = this.datepipe.transform((new Date().getTime()) - 3888000000, 'dd/MM/yyyy'); <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input matInput [picker]="picker" placeholder="Date" autocomplete="off" name="date" formControlName="date" [ngModel]="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker [startAt]="startDatePicker" #picker></mat-datepicker> </mat-form-field> 这是我的答案，在你的.html中 <mat-form-field class="mr-sm-24" fxFlex (click)="open()" > <input [matDatepicker]="picker" matInput placeholder="Date" autocomplete="off" name="date" formControlName="date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 在你的.ts中 this.form = this.formBuilder.group({ date: new FormControl(new Date()), // Current Date ... }); 这会将当前日期设置为默认日期。

angular typescript angular-material angular-material-datetimepicker

回答 9 投票 0

从 spécifique mat-option 中删除 mat-pseudo-checkbox

在角度材质中，mat-select 具有元素 mat-pseudo-checkbox，它在 mat-option 中显示复选图标。我有多个垫选择，我想删除或隐藏此元素。和 ::ng-深.mat-

css angular angular-material

回答 1 投票 0

Angular mat-table 无法使单元格文本省略

嗨，我正在使用 Angular Material 表作为我的网格，mat-table 在内部扩展单元格高度以调整长文本，但我想保持高度一致并显示省略号。有什么建议...

angular angular-material

回答 2 投票 0

如何根据 Angular 中的表单控件值有条件地渲染 mat-select 中的 multiple 属性？

我的 Angular 应用程序中有一个表单，其中包含一个 mat-select 元素，该元素应该允许根据条件进行多项选择。具体来说，我想有条件地包含多个属性...

angular angular-material

回答 1 投票 0

Angular 材质组件不继承类

我使用的是有角度的材质主题，应用了默认的浅色主题，如果 .dark-theme 类位于元素上，则应用深色主题。我遇到了一个问题，虽然有角材料

angular angular-material

回答 1 投票 0

Angular 16 Reactive Form - 表单控件禁用不起作用

我正在使用 Angular 16 制作一个反应式表单。当选中该复选框时，我想阻止数据输入到其中一个输入，即禁用它。我的代码如下，但是不行，可以吗...

angular typescript angular-material angular-reactive-forms angular16

回答 2 投票 0

Angular16 已禁用，无法使用reactiveForms

我正在使用 Angular 16 制作一个反应式表单。当选中该复选框时，我想阻止数据输入到其中一个输入，即禁用它。我的代码如下，但是不行，可以吗...

angular angular-material angular-reactive-forms

回答 2 投票 0

Angular16 已禁用，无法使用反应形式

我正在使用 Angular 16 制作一个反应式表单。当选中该复选框时，我想阻止数据输入到其中一个输入，即禁用它。我的代码如下，但是不行，可以吗...

angular angular-material angular-reactive-forms

回答 1 投票 0

如何在没有额外间距的情况下使用角度材质复选框？

我目前正在使用 Angular Material，想知道是否有办法在没有默认间距的情况下使用复选框。我注意到 Angular Material 的复选框被一些

css angular angular-material

回答 1 投票 0

带有 mat-nav-list 的 Angular Material 扩展面板的对齐问题

我使用 mat-nav-list 来显示菜单项，第四个菜单项是 Angular Material Expansion 控件。我在这里缺少对齐方式。其屏幕截图如下。编辑相关代码是

html css angular angular-material

回答 1 投票 0

在 Angular 中单击 Mat-Expansion-Panel 标题时更改其背景颜色

下面是我在 Angular 15 和 Angular Material 14 中使用的代码下面是我在 Angular 15 和 Angular Material 14 中使用的代码 <mat-nav-list role="list"> <a mat-list-item role="listitem" class="list-item-setting" id="emailTemplatesId" *ngIf="isSysAdmin" (click)="sideNavLink(true, $event)" matTooltip="Notification Templates" matTooltipPosition="right" [matTooltipDisabled]="!isCompressed" [routerLink]="['/email-notification-templates']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" class="admin-link"> <mat-icon class="list-item-setting">email</mat-icon> <span class="nowrap add-padding">Email Templates</span> </a> <a > <mat-accordion *ngIf="isAdmin && !isCSR"> <mat-expansion-panel hideToggle [(expanded)]="panelOpenState" class="mat-elevation-z0"> <mat-expansion-panel-header> <mat-panel-title style="text-align: left;" (click)="clickNotificationMgmt($event)"> <img src="../../../../assets/images/icon_bell.svg" alt="Notification Management"> <span class="add-padding-to-mat-panel-header"><a class="list-item-setting add-padding" [routerLink]="['/notification-list']" routerLinkActive="active">Notification Management</a></span> </mat-panel-title> </mat-expansion-panel-header> <div> <mat-panel-description (click)="clickNotificationList($event)" [ngClass]="isNotificationListClicked ? 'bold' : ''" id="notificationListId" (click)="sideNavLink(true, $event)" class="mat-panel-description-setting"><a class="list-item-setting add-padding" [routerLink]="['/notification-list']" routerLinkActive="active">Notification List </a></mat-panel-description> </div> </mat-expansion-panel> </mat-accordion> </a> </mat-nav-list> 以下是Email Templates的截图这里 Notification Management 是一个垫子扩展面板 - 手风琴控件。如何以与 Email Templates 相同的方式显示 Notification Managment，我的意思是单击它时具有相同的背景颜色，如果用户导航离开它，那么它应该返回正常状态而不突出显示。编辑现在整个 Accordion 控件正在更改背景颜色。我只需要它来获取 Notification Management 标题。我们怎样才能实现这个目标..？任何帮助将不胜感激。您已经在使用 expanded 属性来设置 panelOpenState。那么，如何在 ngClass 中使用 panelOpenState 呢？类似的东西： <mat-expansion-panel [(expanded)]="panelOpenState" [ngClass]="{'active-panel': panelOpenState}"> 然后只需在 css 中设置 active-panel 类即可： .active-panel { background-color: /* your desired color */; }

css angular sass angular-material

回答 1 投票 0

材料注册表中的角度加载图标未预加载

我已经在app.component中注册了一些svg 公共静态 MAT_ICONS_TO_REGISTOR: { 名称: 字符串, url: 字符串 }[] = [ {name: '扫帚', url: '../assets/imgs/broom.svg'}, {名称：'来源图标...

javascript html angular angular-material

回答 2 投票 0

格式为 MM.yyyy 的 Angular 日期选择器想要选择日期

我想使用只接受月份和年份的日期选择器。根据 Angular Materials，我构建了一个函数，该函数应该在选择月份后关闭日期选择器 - 这样就不会出现任何一天...

angular angular-material datepicker

回答 1 投票 0

Mat 日期选择器发送了错误的日期

我有此输入用于选择日期 {{“日期”|翻译}} ...