Question

这是我第一次使用AngularJS，表格验证让我质疑我的理智。您会认为这将是一件容易的事，但无论我尝试使用Google搜索多少种方式，唯一有效的方法就是如果我在控制器中设置了一个标志，如果表单无效就会提交错误类。我在这里看过类似的问题，但没有一个帮助过，所以请不要简单地认为这是一个潜在的重复。其他一切都失败了。

在下面的示例标记中，我将表单缩小为仅一个元素。这是我观察到的：

仅使用$error.required确实有效。 ng-class {'has-error' :registerForm.firstName.$error.required}使用bootstrap has-ertror类概述了文本框，但是这是表单加载，我不想要。
带有错误消息的<p>元素将表现出相同的行为，因此我知道该消息存在且不是malfored。如果我只使用$error.required，它也会显示。但是，只要我添加&& registerForm.$submitted（或$isdirty或!notpristine），邮件就不会显示在表单提交上。没有错误（开发人员工具在chrome中打开）并且会在没有问题的情况下发布到Web API，如果我发送错误的参数，则返回200或400.
我可以在我的控制器中编写验证代码，检查字段是否有值并在$scope上设置标记，例如$scope.firstNameIsRequired，这样可以正常设置ng-show="$scope.firstNameIsRequired" ，但这将消除可测试性。所以问题肯定在于我如何在标记中添加它。但经过一个周末的谷歌搜索后，我在我的智慧结束。唯一不同的是我在点击元素上使用span来提交表单而不是input = submit，但registerForm.$valid函数正在设置正确的值。我是否需要在ng-click指令中触发表单验证？

我正在使用angular.js v 1.4.8。我确实有角度ui，它有自己的验证，但这不应该干扰基本验证。

这是简化的标记：

<form name="registerForm" class="form-group form-group-sm" 
    ng-controller="userAccountController" novalidate>
<div class="form-group" 
        ng-class="{ 'has-error' : registerForm.firstName.$error.required }">
    <div><label>First Name</label> </div>
    <input type="text" class="form-control" id="firstName" name="firstName" value="" 
        ng-model="firstName" placeholder="First Name" maxlength="100" required=""/>
    <p ng-show="registerForm.firstName.$error.required && registerForm.$submitted" 
        class="alert alert-danger">First Name is required</p>
</div>  
    <div>
        <span class="btn btn-default" 
                ng-click="submit(registerForm.$valid)">Register</span>
    </div>

我的控制器代码是

angular.module( "Application" ).controller( "userAccountController", [
"$scope", "userAccountService", function ( $scope, userAccountService)
{
    $scope.hasErrors = false;
    $scope.errorMessages = "";
    $scope.emailExists = true;
    $scope.clearErrors = function (){
        $scope.hasErrors = false;
    }

    $scope.onSuccess = function ( response ) {
        alert( "succeeded" );
    }

    $scope.submit = function (isValid) {
        if ($scope.registerForm.$invalid)
            return;
        alert("isvalid");
        $scope.clearErrors();
         var userProfile = $scope.createUser();
         userAccountService.registerUser(userProfile, $scope.onSuccess, $scope.onError);
    }

    $scope.createUser = function ()   {
        return {
            FirstName: $scope.firstName, LastName: $scope.lastName, Email: $scope.email,
            Password: $scope.password, SendAlerts: $scope.sendAlerts
        };
    };
}
]);

任何帮助将不胜感激。我可能只需要第二眼，因为我从星期五开始就一直处理这个问题。

Answer 1

你想要使用元素。$有效来检查模型是否有效 - 你使用元素。$ error。{type}来检查特定的验证错误。

请记住，表单。$ submit只会在表单实际提交时设置 - 如果表单有验证错误，则不会提交（因此该标志仍为假）

如果您只想在提交时显示错误，可以使用type =“submit”的按钮并绑定到ng-click事件 - 并使用它来设置表单已经过验证的标志。如果表格有效，则处理提交。

一个包含2个文本框的简短示例，具有必需和最小长度验证：

angular.module("myApp", [])
  .controller("myFormController", function($scope) {
    $scope.isValidated = false;
    $scope.submit = function(myForm) {
      $scope.isValidated = true;
      if(myForm.$valid) {
        console.log("SUCCESS!!");  
      }
    };
  });

.form-group {
  margin: 10px;
  padding: 10px;
}

.form-group.has-error {
  border: 1px solid red;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="myApp" ng-controller="myFormController">
  <form name="myForm">
    <div class="form-group" ng-class="{'has-error': myForm.name.$invalid && isValidated}">
      <span>Name:</span>
      <input type="text" name="name" minlength="5" ng-model="name" required />  
      <span ng-if="myForm.name.$error.required && isValidated">Name is required</span>
      <span ng-if="myForm.name.$error.minlength && isValidated">Length must be atleast 5 characters</span>
    </div>
    
    <div class="form-group" ng-class="{'has-error': myForm.email.$invalid && isValidated}">
      <span>Email:</span>
      <input type="text" name="email" minlength="5" ng-model="email" required />  
      <span ng-if="myForm.email.$error.required && isValidated">Email is required</span>
      <span ng-if="myForm.email.$error.minlength && isValidated">Length must be atleast 5 characters</span>
    </div>
    
    <button type="submit" ng-click="submit(myForm)">Submit</button>
  </form>
</div>

AngularJS - 表单验证，v 1.4.8

1 个答案: