AngularJS 仅在提交后验证 ng-invalid 类答案

【问题标题】：AngularJS validation ng-invalid class only after submitAngularJS 仅在提交后验证 ng-invalid 类
【发布时间】：2013-09-11 09:57:38
【问题描述】：

在我的 from 我有几个带有验证的输入，我需要仅在用户提交表单后应用 ng-invalid 类。

在提交时，我可以在范围上设置一个值......

$scope.submitForm = function () {
    $scope.submited = true;
    // other bits
}

...但我不知道如何在不更改验证本身的情况下有条件地显示 ng-invalid。

我正在运行角度1.1.5

【问题讨论】：

标签： javascript forms validation angularjs

【解决方案1】：

Demo

 <input type="email" name="email" ng-model="formData.email" required />
<span ng-show="(myForm.email.$dirty || submitted) && myForm.email.$error.required">
  Email is required
</span>

仅在用户与输入交互后使用 $dirty 标志显示错误：

【讨论】：

我知道它有效，但我不明白ng-show 的逻辑。在我看来，如果它是dirty 或submitted，它将显示错误。这不是发生的行为。另外，您的hasError 函数是如何被调用的以及使用什么参数？

【解决方案2】：

<div ng-app>
<div ng-controller="testController">
    <form name="formValidate">
    <input type="text" name="testing" required ng-model="testField" ng-class="{ invalid: submitted && formValidate.testing.$invalid }"/>
        <button ng-click="test()">Test</button>
        </form>
</div>
</div>
<script>
    var app = angular.module('', []);
function testController($scope)
{
    $scope.submitted = false;
    $scope.test= function()
    {
        $scope.submitted = true;    
        console.log($scope.formValidate.$invalid);
    }
}
</script>
<style>
    .invalid
{
    border:1px solid red;   
}
</style>

【讨论】：

【解决方案3】：

对于自定义错误，我建议在每个字段中使用 $setValidity 方法。

$scope.formName.fieldName.$setValidity('custom_error_name', true);

因此您也可以更好地控制 css 部分，因为这种工作流程还会在您的字段内创建一个自定义类，例如“ng-custom_error_name”，以便您可以处理它。

【讨论】：