更改提交按钮的颜色

Question

我正在处理 angular material 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 中看到的那样；但它甚至在验证表单之前就显示了颜色。

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

Answer 1

我想我刚刚成功了。

用 [ng-class] 试过了。

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

正在工作的 plunker：https://plnkr.co/edit/78K2nQi4x7CjvNbLYfUC?p=preview

Answer 2

另一个简单的变体：

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

更改提交按钮的颜色

Change color of submit button

css

angular2-forms

angular