首页 文章

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

提问于
浏览 次
1

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

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

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

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

UPDATE

$scope.save = function (myForm) {

    $scope.submitted = true;

    if (myForm.$invalid) {
        return;
    }

    $scope.submitted = false;
}

谢谢 ！

angularjs validation

2 回答

  • 0

    嗯，一种方法是观察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>
    回复于
  • 0

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

    $scope.save = function (myForm) {

        $scope.submitted = true;

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

相关问题