Question

我正在处理角度材料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按钮所需的样式。

工作人员：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>

更改提交按钮的颜色

2 个答案: