Question

我正在使用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;
};

});

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

Answer 1

在每个输入类上设置类“validate”，并添加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 forms http://plnkr.co/edit/u0Wr0dza8lGnVrgwrUEa

Answer 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

如何在输入无效且脏的时候显示表单错误？

2 个答案: