Question

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

首先，表格要求：

模块化指令（因此我可以重复使用它们。）
每个字段可能有多个错误，但一次只显示一个，按逻辑顺序...
隐藏提交按钮，直到表单完成，而不仅仅是有效。
Bootstrap主题
这是“棱角分明的方式。”

问题是＃3。我试过这个：

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

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

这是我的小提琴： 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支票添加到您不想显示的任何内容中

Answer 2

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

以下表单应符合您的要求，但我没有“Bootstrap主题”错误验证消息。它只使用默认的角度功能。

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

如果它无效，它也会隐藏提交按钮......但是......我建议只使用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>

将这些检查添加到验证中需要一点时间，但这是“有角度的方式”。

我希望有所帮助。

Answer 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指令冲突。

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

3 个答案: