Fatal编程技术网
  • angularjs/
  • Angularjs 如何验证输入字段ng模型值并在UI上显示错误消息，而无需参考'；ng表格'；或'；表格'；名字

Angularjs 如何验证输入字段ng模型值并在UI上显示错误消息，而无需参考'；ng表格'；或'；表格'；名字

angularjs

Angularjs 如何验证输入字段ng模型值并在UI上显示错误消息，而无需参考'；ng表格'；或'；表格'；名字,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,背景： 我试图创建一个可以放在任何输入字段中的验证器指令。该指令应验证“ngModel”值，然后生成错误消息以在UI上显示 我不想在输入字段周围使用ng表单，因为我注意到在页面中使用大量ng表单元素（主要在IE浏览器中）会对性能造成严重影响 我的UI页面 <!DOCTYPE html> <html ng-app="app"> <head> <script src="angular.min.js"></script> <

背景：

我试图创建一个可以放在任何输入字段中的验证器指令。该指令应验证“ngModel”值，然后生成错误消息以在UI上显示

我不想在输入字段周围使用ng表单，因为我注意到在页面中使用大量ng表单元素（主要在IE浏览器中）会对性能造成严重影响

我的UI页面

<!DOCTYPE html>
<html ng-app="app">
 <head>
   <script src="angular.min.js"></script>
   <script src="angular-messages.min.js"></script>
   <script src="ngmessages.js"></script>
 </head>
 <body>

 <form name="twitter">
   <input type='email' name="twitt" ng-model="message" twitter-input required/>
 </form>

 <script type="text/ng-template" id="generic-messages">
  <div ng-message="required">This field is required</div>
  <div ng-message="email">This is invalid email</div>
 </script>

 </body>

</html>


此字段必填
这是无效的电子邮件
我的脚本代码（'ngmessages.js'）

angular.module（“应用程序”，['ngMessages']）
.directive（'twitterInput'，函数（$compile）{
返回{
要求：'ngModel'，
链接：功能（范围、元素、属性、模型）{
函数valueValdate（值）{
if（ngModel.$error.required | | ngModel.$error.email）{
变量e=$compile（“”）（范围）；
第（e）项之后的内容；
}     
返回值；
}
ngModel.$parsers.push（valueValdate）；
ngModel.$formatters.push（valueValdate）；
}
})； });

我的问题：

1） 目前，对$error对象的引用是在代码中硬编码的（'twitter.twitt.$error'）

 $compile('<div ng-messages="twitter.twitt.$error"><div ng-messages-include="generic-messages"></div></div>')(scope);

$compile（“”）（范围）；
我不知道怎样才能使它充满活力

2） 首次加载页面时，不会显示验证错误。每次您在输入字段中输入一个值时，都会在UI中显示多条错误消息…这是不正确的

3） *动态验证输入字段ng模型值并在UI上显示错误消息的最佳方法是什么。我不想在ui代码的任何地方使用“ng表单”或“表单”名称，因为我不想将验证器附加到任何特定字段。我希望这一切都在指令层面完成*

 $compile('<div ng-messages="twitter.twitt.$error"><div ng-messages-include="generic-messages"></div></div>')(scope);