带有指令的AngularJS表单验证 – “myform.$valid”对我来说不太合适

我已经破解了我的问题的解决方案,但我并不高兴,它对我来说并不感觉“有棱角”,它增加了代码的维护.

一,表格要求：

>模块化指令(所以我可以重复使用它们.)
>每个字段可能有多个错误,但一次只显示一个错误,按逻辑顺序…
>隐藏提交按钮,直到表单完成,而不仅仅是有效.
> Bootstrap主题
>这是“有角度的方式”.

问题是#3.我试过这个：

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

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

这是我的小提琴：
http://jsfiddle.net/thomporter/e3jye/

解决方法

我只是在探索这个,这就是我为了突出显示逻辑顺序中的电子邮件字段错误(使用引导程序表单控件组)…
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>

您可以将提交的支票添加到您不想在首次提交之前显示的任何内容