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

Question

我想使用 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>

Answer 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>

Answer 2

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

代码

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