Question

我正在使用btn-btn-primary类引导程序进行按钮样式，但是当表单无效时我有问题按钮被禁用，浅蓝色和浅灰色背景与启用时没有足够的差别。如何在两种情况下更改背景颜色和字体？

main.html中

<form name="createProcessFormName" id="createProcessForm" role="form" class="form-horizontal">
    <div class="panel-body formHeight">
        <!--<p class="text-danger" ng-show="createProcessFormName.$dirty && createProcessFormName.$invalid">{{validationMessage}}</p>-->
        <div class="row">
            <div class="form-group col-md-6 fieldHeight">
                <label for="name" class="col-md-5 required">Business
                Name:</label>
                <div class="col-md-7">
                <input type="text" class="form-control" id="name"
                ng-model="DTO.LongName" ng-model-options="{updateOn: 'blur'}"
                placeholder="Name" maxlength="1024" name="Name"
                required>
                <p class="text-danger" ng-show="createProcessFormName.processName.$touched && createProcessFormName.processName.$error.required">Business Process Name is required</p>
            </div>
        </div>
    </div>
</form>

    <button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>

Answer 1

您最好的选择是使用:invalid伪类。

表单填写完所有必填字段后，表单将不再无效，因此按钮应恢复正常状态。

＆＃13;

form + button.btn.btn-primary {
  background: blue;
}
form:invalid + button.btn.btn-primary {
  background: red;
}

＆＃13;

<form>
  <input type="text" required />
</form>

<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>

＆＃13;

Answer 2

我建议使用ng-class #448

将根据condtion添加css类。

当 createFormName。$ invalid 为true时，它将应用 invalidCssClassName

来自你的CSS。

createFormName。$ invalid 为false时，会删除 invalidCssClassName

来自你的CSS。

<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-class="{invalidCssClassName:createFormName.$invalid}" ng-click="submit()">Save</button>

禁用保存按钮时如何更改引导按钮上的样式？

2 个答案: