javascript - 即使必填字段无效， Angular 表单验证也允许提交

Question

当必填字段尚未填写时，如何禁止提交按钮触发其上定义的任何 ng-click - 无论是来自 Controller 还是 HTML ng-click。 注意:我只想在用户单击提交按钮时验证表单，以便在表单有效时触发提交按钮上定义的任何 ng-clicks，否则反之亦然

http://jsfiddle.net/L98x8zqw/

下面是我的代码:

<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，而是使用 ng-submit 。与 ng click 不同，它仅在表单有效时执行。

删除 ng click 并在表单标签中添加 ng-submit，如下所示。

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

Demo