Angular Material项目是Angular中Material Design的实现。该项目基于Material Design系统提供了一组可重用，经过良好测试和可访问的UI组件。不要将此标记用于AngularJS Material，即旧版AngularJS框架的Material Design实现。
我正在尝试使用角度材质创建一组角度元素。当我运行 Angular 应用程序时，一切正常。然而，一旦我导出我的元素，使用 Angular Material 的东西就只是
在任何用户交互之前显示 mat-form-field 验证消息
这是参考代码， 输入报价名称 这是参考代码， <div> <mat-form-field class="w-100 mt-2" appearance="outline"> <mat-label>Enter a name for your quote</mat-label> <input #quoteName matInput placeholder="Enter a name for your quote" formControlName="quoteName" [maxlength]="40" (input)="onQuoteNameInput($event)" /> <mat-hint align="end">{{quoteName.value.length}} / 40</mat-hint> <mat-error *ngIf="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors?.required">Quote Name is required.</mat-error> </mat-form-field> </div> 在上面的代码中，我使用 Touched 属性来控制错误消息的显示，因此我可以根据需要成功显示或隐藏它们。但是，表单加载后，输入字段的轮廓边框仍然显示为红色。如何防止最初出现红色轮廓？ 除了触摸状态之外，还添加了 mat-form-field-invalid 类检查： <mat-form-field class="w-100 mt-2" appearance="outline" [class.mat-form-field-invalid]="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors"> 或者，您可以在 CSS 中使用 Angular 的内置 ng-valid 和 ng-invalid 类以及触摸状态： .mat-form-field { &.ng-invalid.ng-untouched { // Override the default error styles when untouched .mat-form-field-outline { color: rgba(0,0,0,0.12) !important; // Default outline color } } } 您还可以将表单控件初始化为 null 而不是空字符串，以防止立即验证： this.quoteDetailsFormGroup = this.formBuilder.group({ quoteName: [null, Validators.required] }); 另一种方法是使用 updateOn: 'blur' 推迟验证，直到字段失去焦点： this.quoteDetailsFormGroup = this.formBuilder.group({ quoteName: ['', { validators: Validators.required, updateOn: 'blur' }] }); 最稳健的解决方案是结合方法 1 和 3。这是完整的代码： // Component class export class QuoteComponent implements OnInit { quoteDetailsFormGroup: FormGroup; constructor(private formBuilder: FormBuilder) { this.quoteDetailsFormGroup = this.formBuilder.group({ quoteName: [null, Validators.required] }); } } <div> <mat-form-field class="w-100 mt-2" appearance="outline" [class.mat-form-field-invalid]="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors"> <mat-label>Enter a name for your quote</mat-label> <input #quoteName matInput placeholder="Enter a name for your quote" formControlName="quoteName" [maxlength]="40" (input)="onQuoteNameInput($event)" /> <mat-hint align="end">{{quoteName.value.length}} / 40</mat-hint> <mat-error *ngIf="quoteDetailsFormGroup.controls.quoteName.touched && quoteDetailsFormGroup.controls.quoteName.errors?.required"> Quote Name is required. </mat-error> </mat-form-field> </div> 它将使用 null 初始化表单控件 仅当字段被触摸且有错误时才显示红色轮廓
我开发了一个包含多个字段的表单：输入或选择。 问题在于，这种形式的容器具有明确定义的高度，当我单击选择时，它会溢出。 我会...
升级到 Angular Material 16 后，Mat-form-field 标签不浮动
我最近将一个项目从 Angular 15 升级到 Angular 16。到目前为止，逻辑工作正常，但是 mat-form-field 面临一些问题，其中标签不浮动。该...
Angular 2 Extended Family 组件通信（无需父级或外部服务）
我需要一个非常易于理解的解决方案来实现大家庭（即叔叔到侄子、侄女到阿姨、自己到表弟）组件/指令之间的通信，而无需共同的父母/祖先...
我开发了一个包含多个字段的表单：输入或选择。 问题在于，这种形式的容器具有明确定义的高度，当我单击选择时，它会溢出。 我会...
我正在尝试将我的图像与 位置：-webkit-sticky； 位置：粘性； 顶部：1 像素； 但无法实现。 HTML： 我正在尝试将我的图像粘贴到 position: -webkit-sticky; position: sticky; top: 1px; 但是无法实现。 HTML: <mat-tab-group class="user-tabs" (selectedTabChange)="changeUserTab($event)"> <mat-tab label="Selectable Tasks"> <mat-tab-group class="user-chats" (selectedTabChange)="changeChatTab($event)"> <mat-tab *ngFor="let chat of userData.chats; let i = index;"> <img> </mat-tab> </mat-tab-group> </mat-tab> </mat-tab-group> 我的选项卡里面有选项卡，是的。有人对此有解决方案吗？谢谢。 解决方案如下： <mat-tab-group id="my-tab-group" mat-stretch-tabs [selectedIndex]="tab" (selectedIndexChange)="changeTab($event)" > <mat-tab> <custom-component-with-sticky-content></custom-component-with-sticky-content> </mat-tab> <mat-tab> <my-second-component></my-second-component> </mat-tab> </mat-tab-group> ... 和CSS： styles: [ ` /* Needed in order to allow the sticky content */ ::ng-deep #my-tab-group .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active { overflow: visible !important; } ::ng-deep #my-tab-group .mat-tab-body-wrapper { overflow: visible !important; } ::ng-deep #my-tab-group .mat-tab-body-wrapper .mat-tab-body-content { overflow: visible !important; } `, ], 我能够使用 *ngTemplateOutlet 让它工作（以及其他答案的一些帮助，但没有 ngTemplateOutlet 还不够） HTML： <div class="main-container" id="main-container"> <mat-tab-group id="tabs" #tabs> <mat-tab label="myTabLabel"> (your code here) </mat-tab> </mat-tab-group> </div> <ng-container *ngTemplateOutlet="idek"> </ng-container> <ng-template #idek> <mat-toolbar color="warn" >Second Toolbar</mat-toolbar> <div id="add-spacing"> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </div> </ng-template> CSS： ::ng-deep #tabs .mat-tab-body-wrapper .mat-tab-body.mat-tab-body-active { overflow: visible !important; } ::ng-deep #tabs .mat-tab-body-wrapper { overflow: visible !important; } ::ng-deep #tabs .mat-tab-body-wrapper .mat-tab-body-content { overflow: visible !important; } mat-toolbar { --default-height: 50px !important; } mat-toolbar { position: sticky !important; top: var(--default-height) !important; } .main-container { (your code here) } 结果： 请尝试position:fixed，如果需要的话还可以添加z-index:999。 找到了一个原因 - 当至少一个父级将 overflow 设置为 hidden 时，它将不起作用，这就是 mat-tabs 的情况。 Angular 15+（mdc 迁移后） HTML： <mat-tab-group id="my-tab-group" mat-stretch-tabs [selectedIndex]="tab" (selectedIndexChange)="changeTab($event)" > <mat-tab> <custom-component-with-sticky-content></custom-component-with-sticky-content> </mat-tab> <mat-tab> <my-second-component></my-second-component> </mat-tab> CSS： ::ng-deep #my-tab-group .mat-mdc-tab-body-wrapper .mat-mdc-tab-body.mat-mdc-tab-body-active { overflow: visible !important; } ::ng-deep #my-tab-group .mat-mdc-tab-body-wrapper { overflow: visible !important; } ::ng-deep #my-tab-group .mat-mdc-tab-body-wrapper .mat-mdc-tab-body-content { overflow: visible !important; }
Angular 5 - 如何使用 Angular Material 工具提示
我正在按照此链接在 Angular 5 中实现工具提示。 https://material.angular.io/components/tooltip/api 但我不明白如何实际实施这一点。 任何机构都可以添加
如何使主题与 Angular 18 和 Materials 3 兼容
我无法理解为什么会遇到这些问题 我尝试跟踪大量会话，观看视频，但到目前为止我发现的所有内容都取决于 app.module.ts，这不是
我正在使用 Angular prime-ng 并与它一起使用 mat-autocomplete。 我已经使用过它并且工作得很好，但是当我在 prime-ng 侧边栏中重复使用它并单击表单字段时，它会显示选项列表
如何在 Angular 6+ 中更改 mat-paginator 中的 itemsPerPageLabel
我正在使用 Angular 6.0.3 和 Angular Material 7.1.0，我的分页器位于单独的组件中（不是 app.component）。到目前为止我已经尝试过： 创建了名为 myPagni 的单独 ts 文件...
我在我的应用程序中使用 Angular Material，并具有以下按钮设置 我的留言 &l...
我正在尝试对输入字段上的 (focusout) 事件的 Angular Material Date 选择器进行一些验证。如果在验证过程中发现问题，我会将焦点返回到 Mat Date Picker...
我无法更改 Angular 中切换按钮的颜色。 这是我的代码： 切换 ::ng-deep .custom-toggl...
Angular 18 中是否有可用材质 3 的组件 mixin 的列表？
我一直在尝试制作自定义 Material 3 主题，我在制作类和使用 mat.get-theme-color 方面取得了一些成功。然而，在示例中，使用分页器会对按钮产生连锁反应......
我无法将输入值垂直居中。 当密度为 -3 且字体大小为 1em 时，输入的值未正确居中。 还有标签对齐时...
（Angular Material）mat-error 消息未显示在 mat-form-field 中
我正在使用 Angular Material 对 mat-form-field 输入进行一些验证。问题是 mat-error 消息没有显示，输入字段周围的轮廓也没有显示。我明白了...
Angular Material - 元素叠加在图像上（在 MD 卡中）
我正在尝试使用角度材料重现以下内容（也就是说，在图像上添加动态文本）： 文字覆盖图像 我想用md卡，因为方便。 我的问题...
当我们在 Angular 中使用日期选择器输入出生日期时如何显示年龄？ （使用打字稿）
这是我的 HTML 代码， ` 选择日期 这是我的 HTML 代码， ` <mat-form-field class="datepicker"> <mat-label>Pick a date</mat-label> <input matInput #resultPickerModel="ngModel" [matDatepicker]="resultPicker" [(ngModel)]="date" [min]="minDate" [max]="maxDate" (input)="ageFromDateOfBirthday($event)"> <mat-datepicker-toggle matSuffix [for]="resultPicker"></mat-datepicker-toggle> <mat-datepicker #resultPicker> </mat-datepicker> <mat-error *ngIf="resultPickerModel.hasError('matDatepickerParse')"> "{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date! </mat-error> <mat-error *ngIf="resultPickerModel.hasError('matDatepickerMin')"> Minimum date should be {{minDate | date }}</mat-error> <mat-error *ngIf="resultPickerModel.hasError('matDatepickerMax')"> Maximum date should be {{maxDate | date }} </mat-error> </mat-form-field> </mat-grid-tile> <mat-grid-tile> <mat-form-field appearance="fill" class="age"> <mat-label>Age</mat-label> <input type="number" matInput > </mat-form-field> </mat-grid-tile>` 在这里，当我们在日期选择器中选择年龄时，我必须在输入文本框中提供AGE。 请让我知道任何解决方案。 也许这段代码可以帮助你： getAge(birthDate: Date): number { const ageTilNowInMilliseconds = Date.now() - birthDate.getTime(); const ageDate = new Date(ageTilNowInMilliseconds); return Math.abs(ageDate.getUTCFullYear() - 1970); // Because computers count the today date from the 1st of January 1970 } 希望对您有帮助。
我正在 Angular 中创建一个自定义包装器组件来扩展 Angular Material 的 MatDivider，但我遇到了问题，MatDivider 中的组件样式和属性未应用到...