更改提交按鈕的顏色

Question

我正在使用角度材質2.我所嘗試的是驗證表單並在填寫所有必填字段時將其提交。爲了簡潔起見，我已經在掠奪者中展示了一個領域。這是當前的行爲：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};即，檢查它是否禁用了真/假。然後添加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>