如何在所有字段有效之前禁用提交按钮

时间:2016-07-29 20:08:07

标签: angularjs

目前,我知道如何为每个字段设置验证。

但我不知道如何在所有字段生效之前禁用提交按钮。

并在所有字段生效后启用提交按钮。

<div class="form-group">
    <label>Name</label>
    <span ng-messages="form.name.$error" class="alert">
        <span ng-message="required">{{I18n.t("required_field_could_not_be_empty")}}</span>
    </span>
    <input type="text" class="form-control" ng-model="payment_contact.name" required="required" name="name">
</div>

....

   <label>Email</label>
    <span ng-class="{'alert':form.email_booking.$error.email}" ng-show="form.email_booking.$error.email" >
    {{I18n.t("invalid_format")}}
    </span>
    <input type="email" id="email_booking" name="email_booking" class="form-control" ng-model="payment_contact.email">
</div>                            

<a ng-click="place_order()" class="btn_1 green medium">Book now</a>

2 个答案:

答案 0 :(得分:2)

使用ng-submit指令

如果表单有效,这只允许您提交。

https://docs.angularjs.org/api/ng/directive/ngSubmit

答案 1 :(得分:1)

由于您的表单已有名称(表单),只需将ng-disabled="form.$invalid"添加到您的按钮(链接?)。