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

Question

Angular 1.6.2

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

我尝试使用 ng-form 来达到这个目的，并且有两种方法，但每种方法都有副作用。

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

<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 列级别）：

<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 创建多个输入。需要为它们指定不同的名称以使错误消息正确。

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

angularjs ng-form and ng-repeat with input validation and submit action

javascript

html

angularjs

forms

angularjs-ng-form