如何基于选择表单启用和禁用垫按钮

Posted 2023-03-13

【中文标题】如何基于选择表单启用和禁用垫按钮

【英文标题】：How to enable and disable a mat-button based on a select form

【发布时间】：2018-08-10 19:04:30

【问题描述】：

这是我的垫子按钮：

<button class="example-20-width" mat-raised-button disabled>Edit Client</button>

如何根据选择表单是否为空来控制它并使其禁用？

这是我的字段表单：

<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>

【问题讨论】：

[disabled]="someCondition"

Angular2 disable button的可能重复

【参考方案1】：

如果您查看 Angular Material Demos (button)，它是旧版本的 Angular Material 演示，有一个按钮执行此操作。

这个演示曾经对应（现在已经过时）Angular GitHub 页面上的演示，请参阅：github.com - Angular Material - src/demo-app/button。

你可以简单地使用：

<button mat-button [disabled]="isDisabled">

其中isDisabled 是组件中的布尔定义。

【讨论】：

这在这里有效，但我的材料按钮不显示禁用样式。当我查看源代码时，这将变为 ng-reflect-disabled，但如果我手动将其更改为仅禁用视图更新并且角度看起来已禁用。知道如何让它在视觉上工作吗？

【参考方案2】：

使用按钮的[禁用]属性

<button class="example-20-width"  [disabled]="true" mat-raised-button disabled>Edit Client</button>

【讨论】：

mat-raised-button 默认情况下会为背景带来一些颜色，这确实意味着该按钮已被禁用。

【参考方案3】：

使用[禁用]属性

ts 文件

review_btn=true;

html文件

  <button mat-raised-button [disabled]="review_btn" color="primary" mat-button (click)="reviewCreate()">Save</button>

【参考方案4】：

另一种选择是使用模板引用变量并从 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。

【参考方案5】：

html文件

<button mat-stroked-button color="primary" [disabled]="isNextButton" (click)="setSecurity()">Next</button>

ts 文件

isNextButton = true;

setSecurity()  this.isNextButton = false;

【参考方案6】：

如果将 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>