更改提交按钮的颜色答案

【问题标题】：Change color of submit button更改提交按钮的颜色
【发布时间】：2017-04-13 13:15:26
【问题描述】：

我正在研究角度材料 2。我正在尝试验证表单并在填写所有必填字段时提交。为简洁起见，我只展示了 plunker 中的一个字段。这是当前的行为：https://plnkr.co/edit/78K2nQi4x7CjvNbLYfUC?p=preview

form.html

<form class="example-form" #f="ngForm">

    <md-input-container class="example-full-width">
      <input mdInput placeholder="First name" name="firstname" ngModel required>
    </md-input-container>

 <button md-raised-button [disabled]="f.invalid" color="primary">Submit</button>
</form>

验证时提交按钮采用按钮元素中提到的一些原色。但我希望它是一种不同的颜色，比如验证时的绿色，而不是原色。正如您在https://plnkr.co/edit/QwEIcOEHKlsCo8kdyeAh?p=preview 中看到的那样，我尝试删除颜色属性并将其设置为绿色；但它甚至在验证表单之前就显示颜色。

我怎样才能做到这一点？感谢您的帮助。

【问题讨论】：

标签： css angular angular2-forms

【解决方案1】：

我想我刚刚成功了。

用[ng-class] 尝试过。

给我的按钮[ngClass]="{'my-class': !disabled}；即检查它是否禁用了真/假。然后添加 my-class 以及按钮所需的样式。

工作小伙伴：https://plnkr.co/edit/78K2nQi4x7CjvNbLYfUC?p=preview

【讨论】：

【解决方案2】：

另一个简单的变体：

<button md-raised-button [disabled]="f.invalid" [style.color]="'white'" [style.background-color]="f.invalid ? 'gray' : 'green'">Submit</button>

【讨论】：