带有输入和表单验证问题的指令答案

【问题标题】：Directive with input and form validation issues带有输入和表单验证问题的指令
【发布时间】：2015-05-12 02:10:43
【问题描述】：

我有一个包含很多输入字段的表单。我认为一个好主意是重构一组我经常使用的字段，并将所有相关字段限制在一个指令中。所以我的表格是这样的：

  <form name="aForm">
     <input type="number" name="aValue" ng-model="aValue" min="1" max="10" ng-class="{'has-error' : aForm.aValue.$invalid}"/>
     <directive directive-model="anotherValue"></directive>
  </form>

directive 标签，放置两个标签input 与第 2 行的标签非常相似。当验证发生时，一切正常。问题是只有第一个输入字段被has-error 类（Plunker）成功着色。为什么会发生这种情况？我该如何解决这个问题？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

指令获得一个隔离范围。因此，您可以（在您的模板中）将表单控件包装在 ng-form 指令中并对该表单进行验证：

<ng-form name="directiveForm">
  <input 
    type='number' 
    name='anotherValue' 
    min='1' max='10' 
    ng-model='anotherValue.first' 
    ng-class="{'has-error' : directiveForm.anotherValue.$invalid}" />

  <input 
    type='number' 
    name='aSecondValue' 
    min='1' max='10' 
    ng-model='anotherValue.second' 
    ng-class="{'has-error' : directiveForm.aSecondValue.$invalid}" />

</ng-form>

【讨论】：

另一种选择是引用父级：ng-class="{'has-error' : $parent.aForm.aValue.$invalid}"
@Matt ：指令的优点之一是它们是可重用的。如果您在指令中引用特定表单，则只能在该表单上使用它。
很公平。就正确性而言，我认为上述解决方案更正确（使用 ng-form）。