![](/img/trans.png)
[英]How to set angular mat-button properties based on an observable?
[英]How to enable and disable a mat-button based on a select form
这是我的垫子按钮:
<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>
如果您查看Angular Material Demos (button) ,这是 Angular Material demo 的旧版本,有一个按钮执行此操作。
这个演示曾经对应(现在已经过时)Angular GitHub 页面上的演示,参见: github.com - Angular Material - src/demo-app/button 。
您可以简单地使用:
<button mat-button [disabled]="isDisabled">
其中isDisabled
是组件中的布尔定义。
将 [disabled] 属性与按钮一起使用
<button class="example-20-width" [disabled]="true" mat-raised-button disabled>Edit Client</button>
使用 [disabled] 属性
文件
review_btn=true;
html文件
<button mat-raised-button [disabled]="review_btn" color="primary" mat-button (click)="reviewCreate()">Save</button>
另一种选择是使用模板引用变量并从 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>
请参阅有关模板引用变量的角度官方文档。
html文件
<button mat-stroked-button color="primary" [disabled]="isNextButton" (click)="setSecurity()">Next</button>
文件
isNextButton = true;
setSecurity() { this.isNextButton = false;}
如果将 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.