5

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.

First, the form requirements:

  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."

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.

Here's my fiddle: http://jsfiddle.net/thomporter/e3jye/

4

3 回答 3

13

我只是在研究这个，这就是我在电子邮件字段上按逻辑顺序突出显示错误的内容（使用引导表单控制组）... 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在首次提交之前将支票添加到您不想显示的任何内容

于 2013-04-05T19:46:02.380 回答
8

人们不希望所有验证消息同时显示，这是一个常见问题，即使它们都适用。

以下表格应该符合您的要求，但是我没有“引导主题”错误验证消息。它仅使用默认的角度功能。

但简而言之，它应该显示所需的消息，如果值存在但它不是有效的电子邮件，它应该显示无效的电子邮件消息。

如果它无效，它也会隐藏提交按钮......但是......我建议只使用 ng-disabled 禁用提交按钮。不让人们知道提交按钮在哪里，IMO 的可用性很差。

<form name="myForm">
   <label for="email">Email</label>
   <input type="email" id="email" name="email" ng-model="formData.email" required/>
   <span ng-show="myForm.email.$error.required && myForm.email.$dirty">required</span>
   <span ng-show="!myForm.email.$error.required && myForm.email.$error.email && myForm.email.$dirty">invalid email</span>

   <button type="submit" class="btn" ng-show="myForm.$valid">Submit</button>
</form>

将这些检查添加到验证中会花费一些时间，但这是执行此操作的“角度方式”。

我希望这会有所帮助。

于 2013-01-27T01:21:52.067 回答
3

我想为此添加另一个解决方案并使其尽可能完整。此验证与 asp.net 的验证摘要控件具有相似的外观。

表单从 JSON 加载。表单字段和验证是从一个名为requiredFields. 在您单击按钮之前，验证不会显示，而不是在加载时出现在您的面前。

这是一些相关的代码：

HTML

<div ng-show="showValidation() &&  !formReset">
    <h4>The following errors were found:</h4>
    <ul ng-repeat="(key,val) in requiredFields()">
        <li ng-show="myForm[key].$invalid">{{val}} is required</li>
    </ul>
</div>

<form name="myForm" novalidate>
  <label>Age: <span class="ng-cloak" ng-show="myForm.age.$valid">&#10004;</span></label>
  <input type="number" name="age" ng-model="form.age" required />
  <button ng-click="clickButton()">Submit</button>
</form>

JS

$scope.clickButton = function() {
  $scope.formReset = false;
  $scope.showValidation = function () { return $scope.myForm.$invalid; }
  if ($scope.myForm.$valid)
    $scope.jsonoutput = JSON.stringify($scope.form);
}

完整代码： http ://plnkr.co/edit/GAHHab7pEFtlyHnPWVux?p=preview

旁注：如果您不希望弹出工具提示出现，novalidate则标签中的“”很重要。form据我了解，' required' 属性是 HTML5 的一部分，与 angularjs'required指令冲突。

于 2013-04-26T04:08:10.450 回答