重复指令中的角度形式验证答案

【问题标题】：angular form validation inside repeated directive重复指令中的角度形式验证
【发布时间】：2014-09-10 12:39:13
【问题描述】：

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

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

这里有一个 plunker 来说明这一点：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: '@'
        }
    };
});

但这不能正常工作。我知道解决方案可能是编译、指令内的 require 或使用带有第四个参数 (ctrl) 的链接的组合，但我不确定如何实现这一点并且可以使用一些帮助。

【问题讨论】：

你可以试试我的角度验证模块，而不是所有这些麻烦jonsamwell.com/dynamic-angularjs-validation
嗨@JonSamwell，感谢您的回复和链接。我正在测试你的模块。在此页面jonsamwell.github.io/angular-auto-validate 上，您需要更正两件事：当您使用 bower 安装时，要插入的库脚本应该是：并且在表单示例中，第二个 ng-model 应该是 model.password。您的模型是否允许对模糊进行验证？
also :
三个 's' 是错字吗？因为它只需要 2 个就更好了 :)
嗨@vonwolf 谢谢你 - 我刚刚纠正了他们。是的，该库可以通过使用 ngModelOptions 对模糊进行验证，请参阅jonsamwell.github.io/angular-auto-validate/#ngmodeloptions - 如果您对此有任何疑问，请给我发电子邮件。如果您使用的是 Angular 1.3 及更高版本，这可能对您有用jonsamwell.com/…
@JonSamwell 哇，它工作得很好。我已经用 Bower 重新安装了模块，看来您还需要更新添加到 bower_components 的 bower.json 文件：“main”：“./dist/jcs-auto-validate.min.js”，跨度>