angularjs ng-form 和 ng-repeat 带有输入验证和提交操作

Question

Angular 1.6.2

尝试遍历用户输入的集合元素，然后检查其有效性并在验证通过时启用提交操作。

为此我尝试使用ng-form 并有两种方法，但每种方法都有副作用。

第一种方法（ng-form 在表级别）：

<table class="datatable table table-stripped table-responsive" ng-form="form">
    <thead>
    <tr class="headers">
        <th ng-repeat="header in ctrl.headers">{{header}}</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
        <td>{{linkDelay.label}}</td>
        <td>{{linkDelay.value}}</td>
        <td id="proposed-ld-input-column" width=40%>
            <input id="proposed-ld-input" name="input"
                   class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
                   type="number" ng-model="ctrl.inputs[linkDelay.property]"
                   data-ng-required="true" min="0" max="180"/>
            <div class="error" data-ng-show="form.input.$error.required">
                Message required
            </div>
            <div class="error" data-ng-show="form.input.$error.max">
                Message max
            </div>
            <div class="error" data-ng-show="form.input.$error.min">
                Message min
            </div>
        </td>
    </tr>
    </tbody>
</table>

<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
        ng-click="ctrl.applyChanges()">
    <span>Apply</span>
</button>

在这种方法中，提交被禁用，直到所有输入都在设定的范围内但不出现验证消息。

第二种方法（ng-form 在表格列级别）：

<table class="datatable table table-stripped table-responsive">
    <thead>
    <tr class="headers">
        <th ng-repeat="header in ctrl.headers">{{header}}</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
        <td>{{linkDelay.label}}</td>
        <td>{{linkDelay.value}}</td>
        <td id="proposed-ld-input-column" width=40% ng-form="form">
            <input id="proposed-ld-input" name="input"
                   class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
                   type="number" ng-model="ctrl.inputs[linkDelay.property]"
                   data-ng-required="true" min="0" max="180"/>
            <div class="error" data-ng-show="form.input.$error.required">
                Message required
            </div>
            <div class="error" data-ng-show="form.input.$error.max">
                Message max
            </div>
            <div class="error" data-ng-show="form.input.$error.min">
                Message min
            </div>
        </td>
    </tr>
    </tbody>
</table>

<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid" 
        ng-click="ctrl.applyChanges()">
    <span>Apply</span>
</button>

在这种方法中会显示验证消息，但始终启用提交按钮。

你能告诉我我做错了什么吗？

Answer 1

为输入赋予不同的名称：

<table class="datatable table table-stripped table-responsive" ng-form="form">
    <thead>
    <tr class="headers">
        <th ng-repeat="header in ctrl.headers">{{header}}</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
        <td>{{linkDelay.label}}</td>
        <td>{{linkDelay.value}}</td>
        <td id="proposed-ld-input-column{{$index}}" width=40%>
            ̶<̶i̶n̶p̶u̶t̶ ̶i̶d̶=̶"̶p̶r̶o̶p̶o̶s̶e̶d̶-̶l̶d̶-̶i̶n̶p̶u̶t̶"̶ ̶n̶a̶m̶e̶=̶"̶i̶n̶p̶u̶t̶"̶
            <input id="proposed-ld-input{{$index}}" name="input{{$index}}"
                   class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
                   type="number" ng-model="ctrl.inputs[linkDelay.property]"
                   data-ng-required="true" min="0" max="180"/>
            <div class="error" ng-show="form['input'+$index].$error.required">
                Message required
            </div>
            <div class="error" ng-show="form['input'+$index].$error.max">
                Message max
            </div>
            <div class="error" ng-show="form['input'+$index].$error.min">
                Message min
            </div>
        </td>
    </tr>
    </tbody>
</table>

<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
        ng-click="ctrl.applyChanges()">
    <span>Apply</span>
</button>

ng-repeat 创建多个输入。需要为它们分配不同的名称才能正确显示错误消息。