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

这是我的垫子按钮：

编辑客户端

如何根据所选表单是否为emtry来控制它并将其禁用

这是我的字段表：

{{食品公司}

使用带按钮的[禁用]属性

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

编辑客户端

如果您查看angular metrail demo的较旧版本，会看到一个按钮执行此操作

此演示与Andrgulr github中的演示相对应（过去是过时的）。见：

您可以简单地使用：

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

---

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

使用[disabled]属性

ts文件

review_btn=true;

isNextButton = true;

setSecurity() { this.isNextButton = false;}

html文件

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

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

保存

html文件

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

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

---

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

编辑客户端

另一种选择是使用模板引用变量，并从MatSelect获取信息：

{{食品公司}
验证

---

请参阅。

[disabled]=“someCondition”

此处可能存在此项的重复，但“材质”按钮不显示禁用样式。当我查看源时，它将变为禁用ng reflect，但如果我手动将其更改为仅禁用，则视图将更新，并且在角度上看起来是禁用的。你知道如何让它在视觉上工作吗？默认情况下，垫子凸起的按钮会给背景带来一些颜色，这实际上意味着按钮被禁用。