Angularjs 验证和突出显示 ng-repeat 中的输入

Question

在这里使用 angularjs。我有一个表格，其中使用在单击（+）按钮时添加由 2 个输入文本组成的动态行。在完成（提交）按钮上添加行后，我想验证输入。我确实看到我的验证正常，但它没有突出显示有错误的行。这是我的代码： <table class="table table-borderless" ng-if="options.length>0">              <thead>            <tr>                <td class="bold">Key</td>                <td class="bold">Value</td>            </tr>        </thead>        <tbody style="border: none;">            <tr ng-repeat="m in options">                <td ng-class="{ 'has-error': paramForm['ctrlKey_' + {{$index}}].$invalid && (paramForm['ctrlValue_' + {{$index}}].$touched || paramForm.$submitted) }">                    <input type="text" name="ctrlKey_{{$index}}" class="form-control" ng-model="m.optionText" required />                                        </td>                <td>                    <input type="text" class="form-control" ng-model="m.optionValue" required />                </td>                <td>                    <a class="btn btn-xs" ng-click="Remove($index)"><i class="glyphicon glyphicon-trash"></i></a>                </td>            </tr>        </tbody>    </table>我认为添加以下行会使我的 TD 突出显示为红色，但这不起作用。ng-class="{ 'has-error': paramForm['ctrlKey_' + {{$index}}].$invalid && (paramForm['ctrlValue_' + {{$index}}].$touched || paramForm.$submitted) }"这里有什么遗漏吗？

Answer 1

首先在表单内移动按钮。

其次，您定义的输入名称与 TD ng-class 中使用的名称不匹配

纠正这些并让我们知道。

Answer 2

他们向 HTML5 添加了一项新功能，可以进行输入验证。您只需将以下内容添加到任何输入标签：

<input required>

文档和示例

https://www.wufoo.com/html5/required-attribute/