标签: angular-material
仅在$ touch为true时显示的角度ng-messages
我没有做任何太特别的事情.
我有一个输入,我希望每次击键都有效.如果验证失败,则显示错误.不要等待模糊事件触发$ touch.
我认为这是默认情况,但显然不是.我使用角度材料和角度消息.我正在为封锁检测这样做.
标记:
<form name="primaryLogin" novalidate>
<md-content layout-padding layout="column">
<md-input-container flex>
<label>Login ID</label>
<input type="text" required="" name="login" ng-model="primary.loginID" capslock>
<div ng-messages="primaryLogin.$error">
<div ng-message="required">
Please enter a Login ID.
</div>
<div ng-message="capslock">
Caps Lock is ON!
</div>
</div>
<pre>{{ primaryLogin | json }}</pre>
</md-input-container>
</md-content>
</form>
当我第一次来到页面,打开大写锁定,并开始输入,我的错误消息如下所示:
{
"$error": {
"capslock": [
{
"$viewValue": "Q",
"$validators": {},
"$asyncValidators": {},
"$parsers": [
null
],
"$formatters": [
null,
null
],
"$viewChangeListeners": [],
"$untouched": false,
"$touched": true,
"$pristine": false,
"$dirty": true,
"$valid": …推荐指数
解决办法
查看次数
创建自定义角度材质主题时,最佳方法是什么？
我试图了解如何最好地使用Angular-material主题:
谷歌提供各种调色板,并提供如何在调色板之间轻松切换的指南.
我已经看到了这个问题,并找到了一堆工具来生成一个主色调的工具(tool1,tool2)
虽然从设计师那里获得定制设计时,选择了不同的颜色,我发现很难将设计颜色作为一个完整的主题来实现,因为有太多的变量需要考虑(如悬停阴影,墨水波纹阴影等).
我的问题是:
作为开发人员,我可以从每个设计中创建一个足够令人愉悦的主题(通过JS主题或CSS覆盖),还是有任何限制要考虑？
设计师在创建设计时是否应该考虑一些指导原则？
我们是否应该通过使用Google预定义的调色板来放弃设计的灵活性？
**
编辑 - 05/2017:
我决定完全关闭主题,因为我无法完全理解如何根据我们的需求定制它.
我现在通过webpack将变量注入到SASS文件中,并且outcode更加清晰.
**
推荐指数
解决办法
查看次数
角度材料Datepicker在变化时获得价值
我正在使用角度和角度材料的新版本.我需要获取datepicker用户更改日期时的值,然后将该值传递给函数并执行某些操作.
日期选择器
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="roomsFilter.date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker [(ngModel)]="roomsFilter.date" ngDefaultControl (selectedChanged)="onChange($event)"></mat-datepicker>
</mat-form-field>
这个功能.
public onChange(event: any, newDate: any): void {
console.log(event.target.value);
// this.getData(newDate);
}
推荐指数
解决办法
查看次数
默认情况下选中复选框角度材料
我正在尝试使用材质角度复选框,并将其默认设置为已选中,但它显示为未选中,有什么问题？
<mat-checkbox class = "example-margin" [(ngModel)] = obj.impresora>
<label>Printer</label>
</mat-checkbox>
obj.impresora属性是布尔值
推荐指数
解决办法
查看次数
在角材料中切换主题5
我一直在阅读一些关于此的文章,但它们似乎在几种不同的方式上存在冲突.我希望重新创建与最新版角度材料[5.0.0-rc0] 的角度材料文档站点相同的主题切换
我有两个自定义主题,这是custom-theme.scss,并且有light-custom-theme.scss几乎相同,没有mat-dark-theme
@import '~@angular/material/theming';
$custom-theme-primary: mat-palette($mat-blue);
$custom-theme-accent: mat-palette($mat-orange, A200, A100, A400);
$custom-theme-warn: mat-palette($mat-red);
$custom-theme: mat-dark-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include angular-material-theme($custom-theme);
我的styles.scss看起来像这样
@import '~@angular/material/theming';
@include mat-core();
@import 'custom-theme.scss';
@import 'light-custom-theme.scss';
.custom-theme {
@include angular-material-theme($custom-theme);
}
.light-custom-theme {
@include angular-material-theme($light-custom-theme);
}
然后在index.html中调用它 <body class="mat-app-background">
当我做一个主题时,一切正常.但我试图在两者之间切换.将两个主题添加到angular-cli.json中,light-custom-theme接管
"styles": [
"styles.scss",
"custom-theme.scss",
"light-custom-theme.scss"
],
我在我的一个组件中有以下代码来处理切换主题
toggleTheme(): void {
if (this.overlay.classList.contains("custom-theme")) {
this.overlay.classList.remove("custom-theme");
this.overlay.classList.add("light-custom-theme");
} else if (this.overlay.classList.contains("light-custom-theme")) {
this.overlay.classList.remove("light-custom-theme");
this.overlay.classList.add("custom-theme");
} else {
this.overlay.classList.add("light-custom-theme");
}
}
但无论何时运行,主题都保持不变.对于它的价值,在overlay.classList中的位置0处已经存在"cdk-overlay-container"对象
0:"cdk-overlay-container"
1:"custom-theme"
length:2
value:"cdk-overlay-container custom-theme"
我不确定如何调试这个,因为角度材料文档没有给我太多的工作,任何帮助将是赞赏! …
推荐指数
解决办法
查看次数
mat-table中的自定义过滤器
我正在使用mat-table.它有一个过滤器,可以正常使用doc示例:
从https://material.angular.io/components/table/overview,原始代码是:
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<mat-table #table [dataSource]="dataSource">
<!-- the rest of the code -->
</mat-table>
export class TableFilteringExample {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
}
const ELEMENT_DATA: Element[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, …推荐指数
解决办法
查看次数
如何通过 Flex-Layout 设置 Angular Material Footer
如何在我的应用程序中设置页脚（我使用 Angular Material），以便它：
- 如果内容高度小于视口，则粘在底部
- 如果内容高度超过视口，则向下移动/被向下推
更重要的一件事 - 我想通过angular/flex-layout来实现这一点，而不是通过标准的 HTML/CSS 'flex-box'。
<mat-sidenav-container>
<mat-sidenav #sidenav
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-nav-list>
<mat-list-item *ngFor="let li of listItems" routerLink="{{li.link}}">
<mat-icon mat-list-icon>{{li.icon}}</mat-icon>
<p mat-line>{{li.name}}</p>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<app-header (menuButtonClick)="sidenav.toggle()"></app-header>
<ng-content select="[outlet]"></ng-content>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
谢谢你们。
推荐指数
解决办法
查看次数
重置分页器第一页角材料
我试图转到mat-paginator的第一页，即重置分页，但不起作用。知道如何解决吗？
我的 html 是这样的
<mat-paginator [length]="itemTotal" [pageIndex]="page" [pageSize]="itemPage" (page)="pageEvent = getPublicationFollowersData($event)">
</mat-paginator>
打字稿：
getPublicationFollowersData(event?: PageEvent) {
this.getPublicationsUser(event.pageIndex);
}
我尝试使用以下方法初始化页面：
this.page = 1
但它不起作用。
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
MatSidenav 和 MatDrawer 有什么区别？
它们可以在同一个文档页面上找到，但看起来是一样的。您知道从功能角度来看的区别吗？使用一个比另一个有什么好处？
https://material.angular.io/components/sidenav/overview
首先感谢阅读。
推荐指数
解决办法
查看次数
标签 统计
angular-material ×10
angular ×8
css ×3
angularjs ×2
javascript ×2
angular-cdk ×1
angular5 ×1
angular7 ×1
checkbox ×1
datepicker ×1
html ×1
mat-input ×1
ng-messages ×1
pagination ×1
sass ×1
typescript ×1