我是AngularJS的新手,但是我已经进行了广泛的搜索,无法找到这个问题的可行答案,也许这就是我想到的方式.
我想要的是能够组合错误条件,以便我可以在ng-messages模块中使用更通用的错误消息.由于我们的应用程序是多语言的,因此这节省了我们维护文本的大量时间.在我的例子中,将minlength,maxlength和pattern组合起来并将其引用为1通用消息会很棒.我让它工作的唯一方法是为每种类型单独的ng-message,然后重用错误文本,这对我来说似乎是多余的.希望它是一些简短的东西我不想理解何时/如何使用,或||.
<form id="myFormId" name="myForm" novalidate>
<input name="sText" ng-model="someText"
type="text"
required
ng-minlength="8" minlength="8"
ng-maxlength="8" maxlength="8"
ng-pattern="/^[a-zA-Z0-9]{8,8}$/" pattern="/^[a-zA-Z0-9]{8,8}$/">
<div ng-messages="myForm.sText.$error" role="alert">
Error message:
<div ng-message="required">Required text missing</div>
<div ng-message="minlength || maxlength || pattern">Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of || </div>
<div ng-message="minlength">Too short - this does work but does not change even if this is removed</div>
</div>
</form>
我创建了这个简单的Plunk来说明我想要做的事情:
编辑1 …
我的ngMessages在我的指令模板中不起作用!
我有一个指令myInput与模板和链接功能,模板函数内部创建一个包模板字符串<label>和<input>.
在Link函数中,我使用require: '^form'FormController并检索表单名称.然后我ngMessages在包裹的元素之后放置一个块.
(function () {
'use strict';
angular
.module('app.components')
.directive('myInput', MyInput);
/*@ngInject*/
function MyInput($compile, ValidatorService, _, LIST_OF_VALIDATORS) {
return {
require: '^form',
restrict: 'E',
controller: MyInputController,
controllerAs: 'vm',
bindToController: true,
template: TemplateFunction,
scope: {
label: '@',
id: '@',
value: '=',
validateCustom: '&'
},
link: MyInputLink
};
function MyInputController($attrs) {
var vm = this;
vm.value = '';
vm.validateClass = '';
vm.successMessage = '';
vm.errorMessage = '';
}
function TemplateFunction(tElement, …<div class="form-group" ng-class="{'has-error': claimForm.consigneeID.$invalid && claimForm.consigneeID.$touched}">
<label class="label-bold">Consignee ID</label><br>
<input name="consigneeID" ng-model="coId" type="number" ng-maxlength="5" ng-minlength="5" class="form-control input-sm" required>
<div class="help-block" ng-messages="claimForm.consigneeID.$error" role="alert">
<div ng-message="required">Field is required.</div>
<div ng-message="minlength">Too few digits.</div>
<div ng-message="maxlength">Over 5 digits.</div>
</div>
minlength和maxlength错误显示正确的消息并正确设置"has-error"ng-class.但是,如果我将"required"添加到我的字段和相应的消息中,则在重新加载时,"Field is required"始终显示(直到填写).
但是,除非跳过不同的错误,否则不会出现红色的"有错误"类.
我在这里想念的是什么？
javascript twitter-bootstrap angularjs angularjs-ng-form ng-messages
我一直在尝试验证Checkbox set和Radio set并使用ng-messages指令显示错误消息但是它没有按预期工作.ng-messages根本不显示错误消息.我正在使用html文件填充错误消息.在解决错误之前,我的表单中将禁用提交按钮.
如何在以下情况下显示Checkbox集和Radio set的错误消息:
收音机中没有选择一个选项？
在Checkbox集中未选择至少一个选项？
检查Checkbox集的检查以便我们检查至少2个或更多,检查等等？
这是我的表格:
<form name="userForm" ng-submit="submitForm()" novalidate>
<div class="form-group" ng-class="{ 'has-error' : userForm.subscribe.$invalid && !userForm.subscribe.$touched }">
<label class="checkbox-inline">
<input type="checkbox" id="subscribe1" value="option1" name="subscribe[]" ng-model="user.subscribe" required> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="subscribe2" value="option2" name="subscribe[]" ng-model="user.subscribe" required> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="subscribe3" value="option3" name="subscribe[]" ng-model="user.subscribe" required> 3
</label>
<div class="help-block" ng-messages="userForm.subscribe.$error" ng-show="userForm.subscribe.$invalid">
<div ng-messages-include="home/messages.html"></div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.gender.$invalid && !userForm.gender.$touched }">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" ng-model="user.gender" …是否可以使用角度为1.3的ng-messages并在顶部显示验证摘要以及不同字段的错误消息？
<div ng-messages="myForm.$error">
<div ng-message="required">Need to show required error for field 1.</div>
<div ng-message="required">Need to show required error for field 2.</div>
</div>
我怎样才能实现这一目标？到目前为止我看到的所有示例都显示了单个字段的错误消息,而不是表单中的所有字段.
我是否需要为每个字段添加多个ng-messages部分？
我是使用 Angular JS 进行表单验证的新手，所以我环顾四周，发现了一个很好的教程。该教程可以在这里找到。我知道 Stack Overflow 上有一些帖子是关于ng-messages但我查看了它们，它们似乎与我的问题无关。
我已经ng-messages使用 bower安装并使用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 …我已经将Angular-Messages安装到我的Ionic V1应用程序中,但我无法使其正常工作.
错误:
Uncaught TypeError: l.module(...).info is not a function at angular-messages.js:267
at angular-messages.js:6
这是我的index.html:
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/sha1.js"></script>
<script src="lib/ionic-material/dist/ionic.material.min.js"></script>
<script src="lib/angular-messages/angular-messages.min.js"></script>
在我的app.js
var app = angular.module('starter', ['ionic', 'ngCordovaOauth', 'ionic-material', 'ngMessages'])
读一点我认为这可能是角度,角度动画和角度消息之间的版本问题,它们必须在相同的版本才能兼容.
Bower包列表 - bower.json:
"dependencies": {
"ng-cordova-oauth": "^0.2.6",
"angular": "~1.6.4",
"angular-animate": "~1.6.4",
"angular-messages": "~1.6.4"
}
但没有..仍然得到同样的错误.还有什么呢？有任何想法吗？
谢谢
情况:
我的角度应用程序中有很多表单,我需要一个有效的错误消息系统.我发现ngMessages很有用.
但我希望只有当用户模糊一个字段时才会显示错误消息,以便减少"侵略性".
尝试:
尝试在1000ms使用去抖动
<label class="item item-input">
<span class="input-label"> Email alternative </span>
<input type="email" name="email_alternative" ng-model="profile_edited.email2" ng-model-options="{ debounce: 1000 }">
</label>
<!-- Error messages for ALTERNATIVE EMAIL -->
<label class="item item-input" ng-show="profile_edit_form.email_alternative.$error.email">
<div class="form-errors" ng-messages="profile_edit_form.email_alternative.$error" role="alert" ng-if='profile_edit_form.email_alternative.$dirty'>
<div class="form-error" ng-message="email">Your email address is invalid</div>
</div>
</label>
这样,如果用户没有输入任何内容一秒钟,它将正确显示错误消息.是最接近我得到我想要的.
但有时对于某些用户来说,输入字符@可能需要1秒多一点的时间.然后可能突然出现错误消息并使用户感到困惑.
但如果我设置去抖时间2或3秒太多了.当用户已经在另一个字段中写入时,它可能会出现.
我需要只有在用户模糊了字段后才会触发错误消息.
问题:
如何在模糊时触发ngMessages？
您好，正在创建一个注册表单，我想使用 Angular 检查用户输入的密码是否匹配。我的所有验证都有效（必需，最小和最大长度），但我总是收到密码不匹配的错误。
我的代码如下
<div class="control-group">
<label class="control-label">Password</label>
<div class="controls" ng-class="{ 'has-error': addCustomerForm.password_1.$touched && addCustomerForm.password_1.$invalid }">
<input type="text" name="password_1" class="form-control input-lg" ng-model="newCustomerInfo.password_1" ng-minlength="4" ng-maxlength="12" required>
<div ng-messages="addCustomerForm.password_1.$error" ng-if="addCustomerForm.password_1.$touched">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">The password is too short.</div>
<div ng-message="maxlength">The password is too long.</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Password (Confirm)</label>
<div class="controls" ng-class="{ 'has-error': addCustomerForm.password_2.$touched && addCustomerForm.password_2.$invalid }">
<input type="text" name="password_2" class="form-control input-lg" ng-model="newCustomerInfo.password_2" ng-minlength="4" ng-maxlength="12" ng-pattern="/^{{password_1}}$/" required>
<div ng-messages="addCustomerForm.password_2.$error" ng-if="addCustomerForm.password_2.$touched">
<div ng-message="required">This field is required</div>
<div …