使用angular驗證表行中的輸入

Question

我使用這個lib在頁面上創建表。

可以編輯此表中的每一行。 因此，如果啟用了editMode，則會在行的每一列顯示輸入。 其中一些輸入是必需的。 如果必填字段為空，我想顯示紅色文本“必填”或只顯示紅色邊框。 但是問題 - 當我使用表單時它很簡單。 但就我而言，我不能使用表格。

這個答案對我不利，因為每一行都必須有唯一的表單名稱才能正確驗證。

示例： https ： //jsfiddle.net/r8d1uq0L/147/

<div ng-repeat="user in users">
    <div name="myform-{{user.name}}" ng-form>
        <input type="text" ng-model='user.name' required name="field"/>
        <span class="error" ng-show="myform.field.$error.required">Too long!</span>
    </div>
</div>
<div>
    <button ng-click="add()">
        Add
    </button>
</div>

    var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.users = [{name:"1"}, {name:"2"}];
    $scope.add = function(){
    $scope.users.push({});
    }
});

Answer 1

無需創建動態表單名稱，因為ng-repeat在瀏覽器上繪制模板時會在每次迭代時創建新的子范圍。 所以只需將name命名為name="innerForm"並使用innerForm.field.$error.required對其進行驗證。

<div ng-repeat="user in users">
    <div name="innerForm" ng-form>
        <input type="text" ng-model='user.name' required name="field"/>
        {{myform[$index]}}
        <span class="error" ng-show="innerForm.field.$error.required">Too long!</span>
    </div>
</div>

叉小提琴