Angular JS ng-Messages 不显示错误信息
Angular JS ng-Messages not displaying error messages
我是使用 Angular JS 进行表单验证的新手,所以我环顾四周,发现了一个很好的教程。可以找到该教程 here。我知道 Stack Overflow 上有一些关于 ng-messages
的帖子,但我查看了它们,它们似乎与我的问题无关。
我已经使用 Bower 安装了 ng-messages
,并且 运行 使用 grunt
安装了它。没有错误,但是我的验证消息似乎没有触发。
我的HTML如下:
<form name="myForm" novalidate>
<fieldset>
<div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
<label for="client">SRF #: *</label>
<input type="text" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
<div ng-messages="myForm.clientNumber.$error">
<!--<div ng-message="required" >SRF # is required.</div>-->
<div ng-message="minlength" >SRF Number is too short.</div>
<!--<div ng-message="maxlength">SRF Number is too long.</div>-->
</div>
</div>
</fieldset>
</form>
我的部分app.JS如下:
angular
.module('myApp', [
// Angular
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router',
'myApp.home',
'restangular',
'ngMessages'
])
我的部分控制器如下:
(function() {
'use strict';
angular.module('myApp.home', [
'ui.router',
'myApp.myFactory',
'ngMessages'
])
.config(homeConfig)
.controller('homeCtrl', home);
homeConfig.$inject = ['$stateProvider'];
home.$inject = ['$http','myFactory','$timeout'];
function home($http,myFactory,$timeout) {
...
}
我看过和试过的:
- https://github.com/angular/material/issues/6440
- https://github.com/angular/material/issues/2820
- https://docs.angularjs.org/api/ngMessages
- http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html
列表中的一些是教程,而另一些是 Stack Overflow 上的帖子:。
我不明白为什么它不起作用。我见过的所有网站看起来都以相同的方式实施。
# From what i can see, you are missing 'when=required' in your 'ng-message'
# This should fix it. Refer to examples below.
# 1) Using 'ng-messages'
# 2) Using 'ng-show'
//---------------------------------------------------------------------------------------------------------------
# HTML - Angular Material Design
# Follow the following example below and it should work.
# Am basically using 'ng-message' to show the error message
<form name="editUserForm">
<div flex layout="row">
<md-input-container flex="100">
<label for="firstName">First Name</label>
<md-icon md-font-icon="zmdi zmdi-account" style="color:#47B2E8"></md-icon>
<input id="firstNameEditUser"
label="firstName"
name="firstName"
type="text"
ng-model="vm.contact.firstName"
required/>
<div ng-messages="editUserForm.firstName.$error">
<div ng-message when="required"><span translate>Please enter your First Name</span></div>
</div>
</md-input-container>
</div>
</form>
//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
# HTML - Angular Material Design
# Follow the following example below and it should work.
# Am basically using 'ng-show' to hide and show the error
# messages
<form name="changePasswordForm">
<md-input-container class="md-block">
<label for="password">Password</label>
<input id="password"
label="password"
name="password"
type="password"
ng-model="vm.user.password"
required/>
<div class="validation-messages-error">
<div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.minlength">
<span>Password is too short</span>
</div>
<div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.maxlength">
<span>Password is too long</span>
</div>
<div ng-show="changePasswordForm.password.$error.required">
<span>Password required</span>
</div>
</div>
</md-input-container>
</form>
//---------------------------------------------------------------------------------------------------------------
# CSS Class
.validation-messages-error {
font-size: 12px;
color: #dd2c00;
margin: 10px 0 0 25px;
}
//---------------------------------------------------------------------------------------------------------------
我们需要做的就是将 ng-model
添加到我们的输入中。
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
总之,<input>
上没有ng-model
元素Angular不关心。
查看下面的工作代码段。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-messages.js"></script>
<script>
var app = angular.module('app', ['ngMessages']);
app.controller('RegistrationScreenController', function() {});
</script>
</head>
<body ng-app="app" ng-controller="RegistrationScreenController">
<form name="myForm" novalidate>
<fieldset>
<div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
<label for="client">SRF #: *</label>
<input type="text" ng-model="clientNumber" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
<div ng-messages="myForm.clientNumber.$error">
<div ng-message="required" >SRF # is required.</div>
<div ng-message="minlength" >SRF Number is too short.</div>
<div ng-message="maxlength">SRF Number is too long.</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
我是使用 Angular JS 进行表单验证的新手,所以我环顾四周,发现了一个很好的教程。可以找到该教程 here。我知道 Stack Overflow 上有一些关于 ng-messages
的帖子,但我查看了它们,它们似乎与我的问题无关。
我已经使用 Bower 安装了 ng-messages
,并且 运行 使用 grunt
安装了它。没有错误,但是我的验证消息似乎没有触发。
我的HTML如下:
<form name="myForm" novalidate>
<fieldset>
<div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
<label for="client">SRF #: *</label>
<input type="text" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
<div ng-messages="myForm.clientNumber.$error">
<!--<div ng-message="required" >SRF # is required.</div>-->
<div ng-message="minlength" >SRF Number is too short.</div>
<!--<div ng-message="maxlength">SRF Number is too long.</div>-->
</div>
</div>
</fieldset>
</form>
我的部分app.JS如下:
angular
.module('myApp', [
// Angular
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router',
'myApp.home',
'restangular',
'ngMessages'
])
我的部分控制器如下:
(function() {
'use strict';
angular.module('myApp.home', [
'ui.router',
'myApp.myFactory',
'ngMessages'
])
.config(homeConfig)
.controller('homeCtrl', home);
homeConfig.$inject = ['$stateProvider'];
home.$inject = ['$http','myFactory','$timeout'];
function home($http,myFactory,$timeout) {
...
}
我看过和试过的:
- https://github.com/angular/material/issues/6440
- https://github.com/angular/material/issues/2820
- https://docs.angularjs.org/api/ngMessages
- http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html
列表中的一些是教程,而另一些是 Stack Overflow 上的帖子:
我不明白为什么它不起作用。我见过的所有网站看起来都以相同的方式实施。
# From what i can see, you are missing 'when=required' in your 'ng-message'
# This should fix it. Refer to examples below.
# 1) Using 'ng-messages'
# 2) Using 'ng-show'
//---------------------------------------------------------------------------------------------------------------
# HTML - Angular Material Design
# Follow the following example below and it should work.
# Am basically using 'ng-message' to show the error message
<form name="editUserForm">
<div flex layout="row">
<md-input-container flex="100">
<label for="firstName">First Name</label>
<md-icon md-font-icon="zmdi zmdi-account" style="color:#47B2E8"></md-icon>
<input id="firstNameEditUser"
label="firstName"
name="firstName"
type="text"
ng-model="vm.contact.firstName"
required/>
<div ng-messages="editUserForm.firstName.$error">
<div ng-message when="required"><span translate>Please enter your First Name</span></div>
</div>
</md-input-container>
</div>
</form>
//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------------
# HTML - Angular Material Design
# Follow the following example below and it should work.
# Am basically using 'ng-show' to hide and show the error
# messages
<form name="changePasswordForm">
<md-input-container class="md-block">
<label for="password">Password</label>
<input id="password"
label="password"
name="password"
type="password"
ng-model="vm.user.password"
required/>
<div class="validation-messages-error">
<div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.minlength">
<span>Password is too short</span>
</div>
<div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.maxlength">
<span>Password is too long</span>
</div>
<div ng-show="changePasswordForm.password.$error.required">
<span>Password required</span>
</div>
</div>
</md-input-container>
</form>
//---------------------------------------------------------------------------------------------------------------
# CSS Class
.validation-messages-error {
font-size: 12px;
color: #dd2c00;
margin: 10px 0 0 25px;
}
//---------------------------------------------------------------------------------------------------------------
我们需要做的就是将 ng-model
添加到我们的输入中。
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
总之,<input>
上没有ng-model
元素Angular不关心。
查看下面的工作代码段。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-messages.js"></script>
<script>
var app = angular.module('app', ['ngMessages']);
app.controller('RegistrationScreenController', function() {});
</script>
</head>
<body ng-app="app" ng-controller="RegistrationScreenController">
<form name="myForm" novalidate>
<fieldset>
<div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }">
<label for="client">SRF #: *</label>
<input type="text" ng-model="clientNumber" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required>
<div ng-messages="myForm.clientNumber.$error">
<div ng-message="required" >SRF # is required.</div>
<div ng-message="minlength" >SRF Number is too short.</div>
<div ng-message="maxlength">SRF Number is too long.</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>