这是我的按钮:
<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>
答案 0 :(得分:17)
如果你看Angular Material Demos (button)这是一个较旧版本的角度metrail演示,就会有一个按钮执行此操作。
这个演示对应于(现在已经过时了)andgulr github中的演示。见:github.com - Angular Material - src/demo-app/button
你可以简单地使用:
<button mat-button [disabled]="isDisabled">
其中isDisabled是组件中的布尔定义。
答案 1 :(得分:2)
使用[disabled] atttribute with button
<button class="example-20-width" [disabled]="true" mat-raised-button disabled>Edit Client</button>
答案 2 :(得分:2)
使用[禁用]属性
ts文件
review_btn=true;
html文件
<button mat-raised-button [disabled]="review_btn" color="primary" mat-button (click)="reviewCreate()">Save</button>
答案 3 :(得分:1)
另一种替代方法是使用模板引用变量,并从MatSelect中获取信息:
<mat-form-field class="example-full-width" #selectedFood>
<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>
<button mat-stroked-button [disabled]="selectedFood.empty">
Validate
</button>
请参见angular official documentation on template reference variables。
答案 4 :(得分:0)
html文件
<button mat-stroked-button color="primary" [disabled]="isNextButton" (click)="setSecurity()">Next</button>
ts文件
isNextButton = true;
setSecurity() { this.isNextButton = false;}
答案 5 :(得分:0)
如果您将ngModel分配给mat-select,则可以检查该模型是否具有值:
<mat-select placeholder="Select customer" [(ngModel)]="book">
<mat-option *ngFor="let food of books.data"
[value]="food.company">
{{food.company}}
</mat-option>
<mat-option >
</mat-option>
</mat-select>
然后您可以检查按钮中是否选择了一个值:
<button class="example-20-width" mat-raised-button [disabled]="!book">Edit Client</button>