Javascript AngularJS-表格验证，第1.4.8版

这是我第一次使用AngularJS，表单验证让我质疑我的理智。你可能会认为这是最简单的部分，但不管我用多少种方式在谷歌上搜索，唯一有效的方法是在我的控制器的submit中设置一个标志，如果表单设置错误类无效。我在这里也研究过类似的问题，但都没有帮助，所以请不要简单地认为这是一个潜在的重复。其他一切都失败了

在下面的标记示例中，我将表单缩减为一个元素。以下是我观察到的情况：

仅使用

$error.required

即可。

ng类

{

'has-error'：registerForm.firstName.$error.required

}确实使用引导has-ertror类勾勒出文本框，但这是在表单加载中，我不希望这样

带有错误消息的

元素将显示相同的行为，因此我知道消息存在并且没有错误。如果我只使用

$error.required

，它也会显示。但是，只要我添加

和®isterForm.$submitted

（或

$isdirty

或

！notpristine

），消息将不会显示在表单submit上。没有错误（让开发人员工具在chrome中打开），并且将毫无问题地发布到web API，如果我发送了错误的参数，将返回ok 200或400

我可以在控制器内编写验证代码，检查字段是否有值，并在

$scope

上设置标志，例如

$scope.firstnameirequired

，这将很好地设置

ng show=“$scope.firstnameirequired”

，但这将删除可测试性。 因此，问题肯定是我如何将其添加到标记中。但在谷歌上搜索了一个周末后，我已经不知所措了。唯一不同的是，我在click元素上使用span来提交表单，而不是

input=submit

，但是

registerForm.$valid

函数正在设置正确的值。我是否需要在

ng click

指令中触发表单验证

我使用的是angular.jsv1.4.8。 我有一个angular 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中，您想使用元素。$valid检查模型是否有效-您使用元素。$error.{type}检查特定的验证错误

请记住，只有在实际提交表单时才会设置表单。$submitted，如果表单存在validationerrors，则不会提交该表单（因此该标志仍然为false）

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

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

angular.module（“myApp”，[]）
.controller（“myFormController”，函数（$scope）{
$scope.isValidated=false；
$scope.submit=函数（myForm）{
$scope.isValidated=true；
如果（myForm.$valid）{
console.log（“SUCCESS！！”）；
}
};
});
。表单组{
利润率：10px；
填充：10px；
}
.form-group.has-error{
边框：1px纯红；
}

姓名：
名称是必需的
长度必须至少为5个字符
电邮：
电子邮件是必需的
长度必须至少为5个字符
提交
您尝试过ng submit吗？这对您有用吗？？？谢谢，但也没有运气。将span ng单击更改为提交输入，并添加了ng submit=“submit（registerForm.$valid）”是否检查了我的plunker？我刚刚检查了。我看到了完全相同的行为，表单加载时会显示验证。我开始怀疑这是否是角度/引导设置。使用grunt和npm对我来说是全新的。我团队中的另一位开发人员设置了这一点，karma test runner。可能是出了什么问题，可能是版本冲突。当我问他关于角形验证的问题时，他说没有，所以现在我真的开始怀疑了。我想我会用flags来破解这个问题（我正在处理blur，这正是我想要的），这样我就可以结束这个故事，然后循环回来。我会给你最好的答案，因为它确实解决了最初的问题。我并没有使用实际的输入类型submit元素，而是在一个范围上使用ng单击，但这确实表明表单无效（registerForm.$valid显示正确的值）。但这只是第一步。我的目标是弄清楚为什么会这样$pristine或$dirty不起作用，因为我想在blur和submit上对每个元素进行验证。但如果不解决这个问题，我就不得不采用丑陋的解决方案，这是对你的isValid的扩展，基本上是一个自定义的$对于每个字段，$pristine作为奇数，$scope.validateForm=function（）{if（$scope.firstName==undefined | |（！$scope.pristine&&$scope.firstName.length==0））$scope.firstNameRequiredError=true；}您可以做的是创建一个helper指令，当您模糊ng模型时，该指令在ng模型上设置一个特定字段，并在测试中检查该字段$一旦模型实际更改，脏字段就会设置。我可能必须这样做。我发现这是我认为在加价中无法解决的问题。我现在正在跟踪onblur和onfocus（onblur将输入类设置为“has error”或“has success”），将输入恢复为无焦点类，并确保在提交时启动所有验证器，但只启动当前启动的验证器
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
        };
    };
}
]);