Question

我正在尝试在表单提交上显示一个验证摘要，一个位于页面顶部的Div，其中包含angularjs中的所有验证错误消息。我使用以下逻辑来显示/隐藏带有验证消息的顶部div，

<div class="alert alert-error" ng-show="submitted && myForm.$invalid">
</div>

我在保存按钮单击时将变量设置为true。它正常工作，但是在第一次提交后，如果输入输入字段的值（必填字段）并清除它，它就会启动验证（顶部div显示）。

有没有办法显示验证div，只显示表单的提交而不是用户清除输入字段？

的更新 的

$scope.save = function (myForm) {

    $scope.submitted = true;

    if (myForm.$invalid) {
        return;
    }

    $scope.submitted = false;
}

谢谢！

Answer 1

确保在显示验证div时将设置提交为false，否则它将在每次额外验证调用后显示。

    $scope.save = function (myForm) {

        $scope.submitted = true;

            if (myForm.$invalid) {
                    $scope.submitted = false;
                    return;
            }
    }

Answer 2

这样做的一种方法是观看FormController的属性$dirty和$setPristine()方法，并使用变量hasError来显示错误与否。

See this plunker作为示例

<强> JAVASCRIPT

controller('AppController', ['$scope', function($scope) {

  $scope.hasError = false;

  $scope.$watch('theForm.$dirty', function() {
    $scope.hasError = false;
    $scope.theForm.$setPristine();
  });

  $scope.save = function() {
    $scope.hasError = $scope.theForm.$invalid;

    if($scope.hasError) {
      // perform error routine
    } else {
     // perform save routine
    }
  };

}]);

<强> HTML

   <body ng-controller="AppController">

    <div class="error" ng-show="hasError">This is an error</div>

    <form name="theForm" ng-submit="save()" novalidate>
      <input type="text" name="text1" ng-model="text1" required>
      <input type="text" name="text2" ng-model="text2" required>
      <button type="submit">Submit</button>
    </form>

  </body>

仅在提交angularjs时验证输入字段

2 个答案: