我在AngularJS应用程序中创建了一个指令,该应用程序在我的应用程序中生成样式输入。它看起来像这样:
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>
我想为此字段创建验证,并添加了错误信息:
<span ng-show="showError(userInfoForm.name,'email')">
You must enter a valid email
</span>
showError是:
$scope.showError = function(ngModelController, error) {
return ngModelController.$error[error];
};
基本上,它是从“使用AngularJS掌握Web应用程序开发”一书中复制的。我有一个问题,因为当我在控制台中记录我的表单,名称为userInfoForm
时,我得到了{{opts.inputname}}
而不是name属性,这里的值应该是“name”。我做错了什么?
答案 0 :(得分:9)
在此处尝试我的dynamic-name
指令:AngularJS dynamic form field validation
将name="{{opts.inputname}}"
替换为dynamic-name="opts.inputname"
我还简化了演示代码:
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>
DEMO(尝试清除文本以查看验证,我使用必要的验证进行快速演示,您可以将代码更改为电子邮件验证)。关键是使用dynamic-name
指令。
答案 1 :(得分:0)
这是对表单/名称验证指令的另一种看法 stacklink
<form name="myFormName">
<nested directives of many levels>
ex: <input ng-repeat=(index, variable) in variables" type="text"
my-name="{{ variable.name + '/' + 'myFormName' }}"
ng-model="variable.name" required />
ex: <select ng-model="variable.name" ng-options="label in label in {{ variable.options }}"
my-name="{{ variable.name + '/' + 'myFormName' }}"
</select>
</form
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^
app.directive('rsName', function(){
var rsNameError = "rsName directive error: "
return {
restrict:'A', // Declares an Attributes Directive.
require: 'ngModel', // ngModelController.
link: function( scope, elem, attrs, ngModel ){
if( !ngModel ){ return } // no ngModel exists for this element
// check rsName input for proper formatting ex. something/something
checkInputFormat(attrs);
var inputName = attrs.rsName.match('^\\w+').pop(); // match upto '/'
assignInputNameToInputModel(inputName, ngModel);
var formName = attrs.rsName.match('\\w+$').pop(); // match after '/'
findForm(formName, ngModel, scope);
} // end link
} // end return
function checkInputFormat(attrs){
if( !/\w\/\w/.test(attrs.rsName )){
throw rsNameError + "Formatting should be \"inputName/formName\" but is " + attrs.rsName
}
}
function assignInputNameToInputModel(inputName, ngModel){
ngModel.$name = inputName
}
function addInputNameToForm(formName, ngModel, scope){
scope[formName][ngModel.$name] = ngModel; return
}
function findForm(formName, ngModel, scope){
if( !scope ){ // ran out of scope before finding scope[formName]
throw rsNameError + "<Form> element named " + formName + " could not be found."
}
if( formName in scope){ // found scope[formName]
addInputNameToForm(formName, ngModel, scope)
return
}
findForm(formName, ngModel, scope.$parent) // recursively search through $parent scopes
}
});