Angularjs 嵌套表单输入验证 ng-repeat答案

【问题标题】：Angularjs nested form input validation ng-repeatAngularjs 嵌套表单输入验证 ng-repeat
【发布时间】：2013-07-25 10:29:08
【问题描述】：

我想使用 ng-repeat 构建一个嵌套表单，如下所示。由于我的输入字段是必需的，我想在下一行添加一条错误消息，如下所示： <span ng-show="submitted && editableForm.[e.name].$error.required" class="error">Required field</span>，我知道这是错误的“editableForm.[e.name].$error.required”，正确的方法是什么？

更新刚刚尝试添加<ng-form name="rowForm">，但这仅在我使用硬编码名称属性时才有效，在我的情况下，这是在 [e.name] 中动态生成的

谢谢狮子座

嵌套形式

<form name="editableForm" novalidate="novalidate"><div class="newEditable">
  <ul ng-repeat="row in newRows">
    <li ng-repeat="e in rowAttrs">
     <input type="text" ng-model="newRows[e.name]" name="e.name" ng-required="e.required">
    </li>
    <li><a href="" ng-click="rm_row($index)">x</li>
  </ul>
  </div><a href="" ng-click="newRow()">{{add}}</a>
  <a ng-show="newRows.length > 0" ng-click="saveIt(editableForm)">{{save}}</a>
</form>

【问题讨论】：

标签： angularjs

【解决方案1】：

对于这个特定的代码示例，您还需要将ng-form 属性添加到第一个ng-repeat：

<ul ng-repeat="row in newRows" ng-form="innerForm">

您现在可以使用原始解决方案执行类似的操作来突出显示必填字段：

<div class="validation_error" ng-show="e.required && innerForm['\{\{e.name\}\}'].$error.required">
    Required
</div>

【讨论】：

我已经使用我的回答中描述的解决方案来动态呈现包含表单中的表单字段并确保它们的验证状态传播到包含表单，即如果有任何一个，用户不应该能够单击提交动态呈现的表单字段是必需的，它没有有效值。

【解决方案2】：

通过在动态名称中添加转义来解决，jsfiddle.net/langdonx/6H8Xx/2

代码

<div class="validation_error" ng-show="e.required && rowForm['\{\{e.name\}\}'].$error.required">
  Required
</div>

【讨论】：

这里实际发生的是您正在创建一个非动态的 rowForm.{{e.name}} 属性。该属性的实际名称是 {{e.name}} 这就是转义它起作用的原因。你的 jsfiddle 也有正确的修复方法，它创建了一个名为“form”的内部表单。每个内部表单都有一个 {{e.name}} 属性，但它们不是动态属性。您可以通过将 {{e.name}} 更改为 'field' jsfiddle.net/6H8Xx/270 来查看它的工作原理。