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

时间:2018-03-02 14:35:10

标签: angular angular-material2

这是我的按钮:

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

6 个答案:

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