带有指令的 AngularJS 表单验证 - "myform.$valid"不太适合我

Question

我已经破解了我的问题的解决方案，但我不高兴，它对我来说并不“有棱 Angular ”，它增加了代码的维护。

一、形式要求:

模块化指令(所以我可以重复使用它们。)

每个字段可以有多个错误，但一次只显示一个，按逻辑顺序...

隐藏提交按钮，直到表单完成，而不仅仅是有效。

Bootstrap 主题

做它“有 Angular 的方式”。

问题是#3。我试过这个:

<div ng-show="myform.$valid">
   <input type="submit" value="Submit" />
</div>

但这只会让提交按钮在一个字段有效时立即显示，然后在您开始下一个字段时再次隐藏。我的“黑客修复”是在范围上创建变量，并在 Controller 中创建一个方法来检查它们(主要是为了保持 View 干净......)但这感觉不对。

这是我的 fiddle :
http://jsfiddle.net/thomporter/e3jye/

Answer 1

我只是在研究这个问题，这就是我为了按逻辑顺序突出电子邮件字段上的错误(使用引导表单控制组)而发现的......
http://jsfiddle.net/kNKbJ/1/

<form name="form" ng-app>
    <div class="control-group" ng-class="{true: 'error'}[form.email.$error.email || (submitted && form.email.$error.required)]">
        <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="form.email.$error.email">Invalid email</span>
        </div>
    </div>

    <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>

您可以添加 submitted在第一次提交之前检查您不想显示的任何内容