Forms 重复指令内的角度形式验证

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

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

下面是一个plunker来说明这一点：

下面是我实现表单的方法，所以我只需要用它们的属性来堆叠指令元素，如下所示：（这里的示例有2个输入，但可能更多）

---

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

您可以尝试我的角度验证模块，而不是所有这些麻烦

---

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

您可以尝试我的角度验证模块，而不是所有这些麻烦。Hi@JonSamwell，谢谢您的回复和链接。我正在测试你的模块。在本页中，有两件事需要更正：使用bower安装时，要插入的库脚本应为：在表单示例中，第二个ng模型应为model.password。你的模型允许对模糊进行验证吗？还有：这三个“s”是打字错误吗？因为它只需要2:）你好@vonwolf谢谢-我刚刚纠正了它们。是的，库可以使用ngModelOptions对blur进行验证。如果您还有任何问题，请给我发电子邮件。如果您使用的是Angular 1.3及以上版本，这可能对您有用@JonSamwell哇，它工作得很好。我已经用Bower重新安装了该模块，似乎您还需要更新添加到Bower_组件中的Bower.json文件：“main”：“/dist/jcs auto validate.min.js”，

<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: '@'
        }
    };
});