Angularjs:表单验证和输入指令 [英] Angularjs: form validation and input directive
问题描述
我创建了产生输入风格在我的应用程序的应用程序AngularJS一个指令。它看起来是这样的:
I created a directive in an AngularJS app which produces styled input in my application. It looks like this:
AC.directive('formInput',function ($compile) {
return {
transclude: true,
replace: true,
scope:{},
templateUrl: '/views/partials/form/input.html',
restrict: 'E',
link: function(scope, element, attrs){
scope.opts = attrs;
if(attrs.ngModel){
element.find('input').attr('ng-model', attrs.ngModel);
$compile(element.contents())(scope.$parent);
}
if(!attrs.type){
scope.opts.type = 'text';
}
}
};
}
)
和它的模板是:
<label class="acxm-textfield {{opts.cssclass}}">
<span ng-bind="opts.labeltext"></span>
<input type="{{opts.type}}" name="{{opts.inputname}}" value="{{opts.inputvalue}}" placeholder="{{opts.placeholder}}" ng-maxlength="{{opts.maxLength}}"/>
</label>
通话很简单:
<form-input ng-model="UserProfile.FirstName" max-length="50" labeltext="{{'GENERAL.name' | translate}}" cssclass="acxm-p-horizontal" inputname="name" inputvalue="{{UserProfile.FirstName}}"></form-input>
我想为这个领域建立验证和我添加了一个错误信息:
I wanted to create validation for this field and I added an error information:
<span ng-show="showError(userInfoForm.name,'email')">
You must enter a valid email
</span>
和showError是:
And showError is:
$scope.showError = function(ngModelController, error) {
return ngModelController.$error[error];
};
基本上,它是从书精通Web应用程序开发与AngularJS复制。我有一个问题,因为当我登录我的形式,它的名字叫 userInfoForm
,在控制台我得到了 {{} opts.inputname}
而不是name属性哪个值这里应该是名。我在做什么错了?
Basically, it is copied from the book "Mastering Web Application Development with AngularJS". I have a problem because when I log my form, which name is userInfoForm
, in console I got {{opts.inputname}}
instead of name property which value here should be "name". What am I doing wrong?
推荐答案
在这里我尝试动态名称
指令:<一href=\"http://stackoverflow.com/questions/21455695/angularjs-dynamic-form-field-validation/21457121#21457121\">AngularJS动态表单字段验证
替换 NAME ={{opts.inputname}}
与动态NAME =opts.inputname
我也简化了您的code演示:
I also simplified your code for demonstration:
app.directive("dynamicName", function($compile) {
return {
restrict: "A",
terminal: true,
priority: 1000,
link: function(scope, element, attrs) {
var name = scope.$eval(attrs.dynamicName);
if (name) {
element.attr('name', name);
element.removeAttr("dynamic-name");
$compile(element)(scope);
}
}
};
});
app.directive('formInput', function($compile) {
return {
replace: true,
scope: {},
templateUrl: 'formInput.html',
restrict: 'E',
link: function(scope, element, attrs) {
scope.opts = attrs;
$compile(element.contents())(scope);
}
}
});
表单输入模板:
<label class="acxm-textfield {{opts.cssclass}}">
<span ng-bind="opts.labeltext"></span>
<input type="{{opts.type}}" dynamic-name="opts.inputname" ng-model="opts.inputvalue"
placeholder="{{opts.placeholder}}"
ng-maxlength="{{opts.maxLength}}" required/> //use dynamic-name directive to bind dynamic names.
</label>
对于快速演示
演示(尝试清除文本,查看验证,我使用需要验证,你可以改变code到电子邮件验证)。关键是使用动态名称
指令。
DEMO (try clearing the text to see the validation, I used required validation for quick demonstration, you could change the code to email validation). The key is using the dynamic-name
directive.
这篇关于Angularjs:表单验证和输入指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!