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&nbsp;required>文档和示例https://www.wufoo.com/html5/required-attribute/