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-class中使用的名称不匹配

更正这些并让他们知道。

Answer 2

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

<input required>

文档和示例

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

Angularjs验证并突出显示ng-repeat

2 个答案: