I am using a library called angular-tablesort to generate tables on my webpage.
Each row in the table is editable, so when editMode is enabled, I display input fields in each column of the row. Some of these input fields are required, and I want to indicate their requirement by showing red text saying "Required" or adding a red border if the required field is empty. However, the challenge lies in the fact that I cannot use forms in this scenario.
The solution provided in this answer does not work for me because each row needs a unique form-name for proper validation.
For reference, you can view an example here: 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({});
}
});