Question

我一直在学习有角度的验证表格。我正在使用ng-pattern来定义输入的正确格式。但是根据元素的参数（$ valid，$ invalid，$ error）自定义类之后，需要大量代码来定义与验证相关的css行为。

所以我正在探索构建一个可以包含所有必要行为的指令元素的选项。

这是一个说明这一点的傻瓜：plunker

这是我实现表单的方式所以我只需要将指令元素与它们的属性堆叠起来:(例如这里有2个输入，但可能更多）

<form role="form" class="form-horizontal" name="signup_form">

    <input-validation 
    ng-model="register.age" 
    namevalue="age" 
    formvalue="signup_form"
    labeltext="What's your Age?" 
    patterntext="/^[0-9]{1,2}$/" 
    errortext="Age must between 1 and 99" 
    placeholdertext="Enter your Age"></input-validation>

    <input-validation 
    ng-model="register.firstname" 
    namevalue="firstname" 
    formvalue="signup_form"
    labeltext="What's your Name?" 
    patterntext="/^[a-zA-Z0-9]{4,20}$/" 
    errortext="Name must between 1 and 20 characters long" 
    placeholdertext="Enter your Name"></input-validation>

  </form>

使用指令：

app.directive('inputValidation', function(){
  return{
        restrict: 'E',
        templateUrl : 'inputValidation.html',
        scope: {
            inputtext: '=ngModel',
            formvalue: '=',
            namevalue: '=',
            labeltext: '@',
            errortext: '@',
            placeholdertext: '@',
            patterntext: '@',
            autofocusvalue: '@'
        }
    };
});

但是这不能正常工作。我知道解决方案可能是编译，需要在指令内部，或使用带有第4个参数（ctrl）的链接的组合，但我不知道如何实现它并可以使用一些帮助。

Answer 1

您可以尝试我的角度验证模块，而不是所有这些麻烦http://www.jonsamwell.com/dynamic-angularjs-validation

它有利于降低HTML的复杂性以及您需要的所有ng-show表达式，以支持向元素动态添加错误消息。这意味着您可以使用验证属性装饰元素，而不必担心其他任何问题。它现在也启用了i18n： - ）

重复指令内的角形验证

1 个答案: