使用角度驗證表格行中的輸入

Question

我使用this lib在頁面上創建表格。

此表中的每一行都可以編輯。所以，如果editMode打開，我在每行的行顯示輸入。其中一些輸入是必需的。如果必填字段爲空，我想顯示紅色文本「必需」或只是紅色邊框。 但問題 - 當我使用表單時很簡單。但在我的情況下，我不能使用表單。

This answer對我不好，因爲每行都必須有唯一的表單名稱才能正確驗證。

例子：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="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> 

Forked Fiddle