Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Validate inputs in table row with angular

I use this lib to create table on page.

Every row in this table can be edited. So if editMode is on, I show inputs at each column of row. Some of this inputs is required. I want to show red text "Required" or just red border if required field is empty. But problem - it's simple when I use form. But in my case I can't use forms.

This answer isn't good for me, cause every row must have unique form-name for correct validation.

Example : 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({});
    }
});
like image 604
demo Avatar asked Feb 14 '26 11:02

demo


1 Answers

No need to create a dynamic form name, as ng-repeat does create new child scope on each iteration while drawing template on browser. So just keep name as name="innerForm" and use innerForm.field.$error.required to have validation over it.

<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

like image 127
Pankaj Parkar Avatar answered Feb 17 '26 11:02

Pankaj Parkar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!