AngularJS表单验证与指令 - ＆QUOT; MyForm的$有效＆QUOT;。不太适合我 [英] AngularJS Form Validation with Directives - "myform.$valid" not quite right for me

问题描述

我砍死一个解决我的问题，但我不喜欢，它并没有感觉角度对我来说，这增加了维护code的。

I've hacked a solution to my problem, but I am not pleased, it doesn't feel "angular" to me, and it adds to the maintenance of the code.

一，形式要求：

1. 模块化指令（这样我就可以重新使用它们。）


2. 每个字段可以具有多个错误，但仅示出一个在一个时间下，在逻辑顺序...


3. 隐藏提交按钮，直到形式的完成中，不只是有效的。


4. 引导主题


5. 请它角办法。

1. Modular Directives (so I can re-use them.)
2. Each field can have multiple errors, but only one is shown at a time, in a logical order...
3. Hide the submit button until the form is complete, not just valid.
4. Bootstrap Themed
5. Do it "the angular way."

问题是＃3。我想这样的：

The problem is #3. I tried this:

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

但是，这只是使提交按钮只要一个字段是有效的显示出来，然后你开始下一个字​​段再次隐藏。我的破解补丁是创建的范围和控制器中的方法来检查他们所有的变量（主要是保持干净观点......）但是，这只是感觉不对。

But this just makes the submit button show up as soon as one field is valid, and then it hides again as you start the next field. My "hack fix" was to create variables on the scope and a method in the controller to check them all (mainly to keep the view clean...) But this just doesn't feel right.

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

推荐答案

我只是在这个四处这里就是我降落在用于在电子邮件领域突出逻辑顺序错误（使用引导形式对照组）...
http://jsfiddle.net/kNKbJ/1/

I was just poking around with this and here's what I landed on for highlighting errors on an email field in logical order (using bootstrap form control groups)... 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>

您可以添加提交检查，以任何你不想展示后才先提交

You could add the submitted check to anything you don't want to show until after first submit

这篇关于AngularJS表单验证与指令 - ＆QUOT; MyForm的$有效＆QUOT;。不太适合我的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！