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];
};

基本上是抄自《Mastering Web Application Development with 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?

推荐答案

在此处尝试我的 dynamic-name 指令:AngularJS 动态表单字段验证

Try my dynamic-name directive here: AngularJS dynamic form field validation

将 name="{{opts.inputname}}" 替换为 dynamic-name="opts.inputname"

我还简化了您的演示代码:

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>

DEMO(尝试清除文本以查看验证，我使用了必需的验证为了快速演示，您可以将代码更改为电子邮件验证).关键是使用 dynamic-name 指令.

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屋！