如何在输入无效和脏时显示表单错误？答案

【问题标题】：How to display form errors just when input are invalid and dirty?如何在输入无效和脏时显示表单错误？
【发布时间】：2014-07-09 16:31:25
【问题描述】：

我一直在使用 AngularJS。我有以下表格：

<html lang="en"  ng-app="app">
...
<div ng-controller="RegisterController">
<h3>Register</h3>

<form name="registerForm" class="form-horizontal panel-body" novalidate="novalidate"> 
<form name="registerForm" class="form-horizontal panel-body" novalidate="novalidate">  

    <div class="form-group">
            <label name="firstname" class="col-md-2 control-label">First Name</label>
             <div class="col-md-4">
                    <input type="text" class="form-control" name="firstname" ng-model="user.firstname" placeholder="First Name"  required>
            </div>
    </div>


    <div class="form-group">
            <label name="lastname" class="col-md-2 control-label">Last Name</label>
            <div class="col-md-4">
                    <input type="text"  class="form-control" name="lastname" ng-model="user.lastname" placeholder="Last Name"  required>
            </div>
   </div>

    <div class="form-group"> 
            <label name="email" class="col-md-2 control-label">Your email</label>
            <div class="col-md-4">
                    <input type="email"  class="form-control" name="email" ng-model="user.email" placeholder="Email Address"  required>
            </div>
             <div class="col-md-2">
            <span ng-show="showError(userInfoForm.email, 'email')" ...>
                    You must enter a valid email
                </span>
                <span ng-show="showError(userInfoForm.email, 'required')" ...>
                This field is required
                </span> 
             </div>
    </div>

   <div class="form-group">
            <div class="col-md-offset-2 col-md-6">
                <button class="btn btn-sm btn-primary" ng-disabled="!canRegister()" ng-click="submit()">Register</button>
            </div>
    </div>

我还有 app.js 文件，其中包含配置和控制器代码，我只是粘贴控制器代码：

app.controller('RegisterController', function($scope) {
$scope.getCssClasses = function(ngModelContoller) {
return {
error: ngModelContoller.$invalid && ngModelContoller.$dirty,
success: ngModelContoller.$valid && ngModelContoller.$dirty
};
};
$scope.showError = function(ngModelController, error) {
return ngModelController.$error[error];
};

$scope.canRegister = function() {
return $scope.registerForm.$dirty &&
$scope.registerForm.$valid;
};

});

我的问题是，当我加载注册页面（包含表单的页面）时，我打印了两个错误： 您必须输入有效的电子邮件此字段为必填项 我想知道当输入脏且无效时如何打印错误，当输入文本有效时如何消失。感谢您的帮助

【问题讨论】：

标签： angularjs validation angular-ui-bootstrap

【解决方案1】：

在每个输入类上设置类“验证”，并添加style.css，如：

.validate.ng-dirty.ng-invalid {
   border: 2px solid red;
}
.validate.ng-dirty.ng-valid {
   border: 2px solid green;
}

Here is one way (of many) to validate formshttp://plnkr.co/edit/u0Wr0dza8lGnVrgwrUEa

【讨论】：

【解决方案2】：

$error 是错误对象，其中键是字段验证名称，值是实际错误消息

<input type="email" name="emailName" ng-model="email" required>

对于此示例myForm.emailName.$error.email = true，如果电子邮件与格式不匹配。 myForm.emailName.$error.required = true如果你还没有在输入字段中添加任何东西

您可以使用myForm.emailName.$valid 直接检查该字段是否有效，但是您的问题是他们想通过两种情况向用户展示错误是什么。所以他们输入$error object来检查error is required email or invalid email

1.Email is required.
2.Invalid email address.

所以他们使用了$error 对象。这就是 myForm.emailName 的外观：

{"$viewValue":"ss","$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":false,"$touched":true,"$pristine":false,"$dirty":true,"$valid":false,"$invalid":true,"$error":{"email":true},"$name":"emailName","$options":null}

check this out

【讨论】：