我想添加自己的自定义颜色,类似于"主要","警告"等.例如,我为橙色背景添加了一个类,但我将它用作类而不是颜色属性.它有效,但代码看起来很混乱.
<button md-raised-button color="primary" class="btn-w-md ml-3 orange-500-bg"><i class="material-icons">description</i> Deactivate</button>
我需要做什么才能添加color="orange"？
多个自动完成在同一页面中,角度为4的不同来源与角度材质:
来源:https://material.angular.io/components/autocomplete/examples
我已经按照材料自动完成示例并尝试在同一页面中添加一个自动完成,但源不同但不起作用.
formcontrol正在创造问题吗？
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
@Component({
selector: 'autocomplete-overview-example',
templateUrl: 'autocomplete-overview-example.html',
})
export class AutocompleteOverviewExample {
stateCtrl: FormControl;
testCtrl: FormControl;
filteredStates: any;
filterTests:any;
tests = [
'Nawab',
'Alaska',
'Arizona',
'Arkansas',
'California'];
states = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
'Illinois',
'Indiana',
'Iowa',
'Kansas',
'Kentucky',
'Louisiana',
'Maine',
'Maryland',
'Massachusetts',
'Michigan',
'Minnesota',
'Mississippi',
'Missouri',
'Montana',
'Nebraska',
'Nevada',
'New Hampshire',
'New Jersey',
'New …我正在使用Angular Material 2 mat-datepicker并希望禁用输入元素,因此用户无法使用文本输入编辑值.
有在角材料详细说明2个文档有关如何禁用的不同部分mat-datepicker,但这些似乎并没有涉及如何禁用文本输入时,它是一种反应形式的一部分.
Angular Material文档建议您通过以下方式禁用文本输入:
<mat-form-field>
// Add the disabled attribute to the input element ======
<input disabled
matInput
[matDatepicker]="dateJoined"
placeholder="Date joined"
formControlName="dateJoined">
<mat-datepicker-toggle matSuffix [for]="dateJoined"></mat-datepicker-toggle>
// Add [disabled]=false to the mat-datepicker =======
<mat-datepicker [disabled]="false"
startView="year"
#dateJoined></mat-datepicker>
</mat-form-field>
但是,如果您的日期选择器是被动表单的一部分,则文本元素保持活动状态,您将从Angular获得以下消息:
看起来您正在使用带有反应式表单指令的disabled属性.如果在组件类中设置此控件时将disabled设置为true,则实际将在DOM中为您设置disabled属性.我们建议使用此方法来避免"检查后更改"错误.示例:form = new FormGroup({first:new FormControl({value:'Nancy',disabled:true})});
我更新了FormGroup组件中的禁用FormControl,它具有禁用输入所需的效果,但是,如果您随后获取FormGroup使用this.form.value禁用表单控件的值不再存在.
有没有解决这个问题,不涉及使用ngModel仅用于mat-datepicker 的单独的模板驱动形式？
下面的代码显示了一个允许选择美国州的自动填充表单控件.
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
但是,如果在我的应用程序中我有许多需要这种类型输入的位置,那么将它转换为一个组件(指令？)是有意义的,其中所有样板都不需要重复.但是,我仍然希望能够在模板驱动或模型驱动的表单中使用它,并允许容器组件改变占位符,验证等.
实现这一目标的简单而有力的方法是什么？
我尝试过为Angular推荐的一般方法,但它们没有考虑Angular Material的各种要求.例如,需要实现MatFormFieldControl.Angular Material提供的指导更多地是使用原始元素创建新的表单控件,而不是利用/包装现有的Angular Material表单控件.
目标是能够以这样的形式做这样的事情:
<mat-form-field>
<lookup-state placeholder="State of Residence" required="true" formControlName="resState">
</lookup-state>
</mat-form-field>
是否可以构建一个使用Angular Material的npm模块,并允许它定义的组件由消费应用程序的自定义主题设置样式？
作为一个例子,假设我创建了一个包含具有以下模板的组件的npm模块:
<button mat-raised-button color="accent">Click me!</button>
是否可以将此组件导入两个不同的应用程序,每个应用程序定义一个自定义的Angular Material主题,并使按钮采用当前应用程序主题的"重音"颜色？
目前,我正在使用ng-packagr来构建Angular友好的npm模块.但是,据我所知,此模块包含一个.scss编译阶段作为打包过程的一部分,这意味着模块中定义的任何样式都无法通过使用该模块的应用程序中的主题进行自定义.
这是我的按钮:
<button class="example-20-width" mat-raised-button disabled>Edit Client</button>
如何根据选择的表格是否为emtry来控制它并禁用它？
这是我的字段形式:
<mat-form-field class="example-full-width">
<mat-select placeholder="Select customer">
<mat-option *ngFor="let food of books.data"
[value]="food.company">
{{food.company}}
</mat-option>
<mat-option >
</mat-option>
</mat-select>
</mat-form-field>
我在我的应用程序中使用了Material 2,但在这个问题中,我想用Input专门解决问题.
正如您在API Reference中看到的那样,有一个名为的属性绑定required,在占位符中显示为星号.
所以,我想知道是否有办法检查表单控件是否在Angular中有一个特定的验证器,因为我真的不想为每个输入手动设置[required]="true/false"
我阅读了AbstractControl文档,但我没有找到任何相关内容.我遇到的hasError 方法(这具有讽刺意味的是没有记录无处 ......无论是在FormGroup也不FormControl也不AbstractControl),但是这不是我要找的.它只是检查表单控件是否有错误,但正如您可能已阅读过,我想检查控件是否有一些特定的验证器...
一些代码:
<md-input-container>
<input placeholder="Placeholder"
mdInput [formControl]="anyCtrl"
[required]="anyCtrl.hasValidator('required')"> <!-- something like this -->
</md-input-container>
我希望这个问题足够清楚.提前致谢.
如何更改Material Angular的Datepicker语言？我在Angular材料2的文档中找不到.这是一个plunkr https://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
我正在尝试设置2个字段值<input matInput>abnd <mat-select>编程.对于文本输入,一切都按预期工作,但是对于<mat-select>视图,这个字段就像它有价值一样null.但是,如果我打电话,console.log(productForm.controls['category'].value它会打印出我以编程方式设置的正确值.我错过了什么吗？
这是代码:
表单配置:
productForm = new FormGroup({
name: new FormControl('', [
Validators.required
]),
category: new FormControl('', [
Validators.required
]),
});
设定值:
ngOnInit() {
this.productForm.controls['name'].setValue(this.product.name);
this.productForm.controls['category'].setValue(this.product.category);
}
}
HTML:
<mat-form-field>
<mat-select [formControlName]="'category'"
[errorStateMatcher]="errorStateMatcher">
<mat-option *ngFor="let category of categories" [value]="category">
{{category.name}}
</mat-option>
</mat-select>
</mat-form-field>
angular2-forms angular-material2 angular angular-reactive-forms angular5
我们正在为我们的应用使用Angular Material表:
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
你能否展示如何在鼠标悬停上突出显示一行？