javascript - 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) }"

这里缺少什么吗？

更新:

我创建了一个jsfiddle:http://jsfiddle.net/aman1981/uk21soj6/11/

Answer 1

首先将按钮移到表单内。

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

更正这些问题并告知。