Question

如果尚未填写必填字段，如何禁止提交按钮以触发在其上定义的任何ng-click-来自控制器或HTML ng-click。注意：我想仅在用户点击提交按钮时验证表单，如果表单有效则触发提交按钮上定义的任何ng-clicks，否则反之亦然

以下是我的代码：

<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]" ng-init="isSubmitted=false">
    <label class="control-label" for="email">Your email address</label>
    <div class="controls">
        <input type="email" name="email" ng-model="email" required />
        <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
    </div>
</div>
<div class="control-group">
  Ready to Submit :{{isSubmitted}}
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true;isSubmitted=true">Submit</button>

Answer 1

而不是点击使用ng-submit。只有在表单有效时才会执行，而不像ng click。

删除ng点击并在表格标签中添加ng-submit，如下所示。

<form name="form" ng-app ng-submit="submitted=true;isSubmitted=true">

Demo

Answer 2

您可以在formName.$invalid按钮的ng-disabled中使用submit。像这样：

<button type="submit" ng-disabled="form.$invalid" 
        class="btn btn-primary btn-large" 
        ng-click="submitted=true;isSubmitted=true">
        Submit
</button>

这里是working fiddle

角度表单验证允许提交甚至强制字段无效

2 个答案: