Angular validation - outputting invalid field names to user

Question

I'm working on validation in my angular app. What I'd really like to do is, when a user hits submit on a form, show a popup with a list of fields that are invalid (e.g. 'These fields are invalid - First name - Lastname etc'). By really like to do it, I actually mean my boss is forcing me to so I have no choice in the matter.

I actually have a way to do this currently on simple inputs by reading the angular form object and getting a list of all fields that are $invalid. Then I can just look at a cached mapping of field names to readable text (e.g. FirstName -> 'First name') to generate the error string.

Basically I have a method that I pass the angular form object in and it creates the string in a generic way (options.labels is my cache of mappings from attribute name to readable names):

for (var key in form) {
    if (key.indexOf("$") !== 0) {
        if (form[key].$invalid) {
            var label = options.labels[key];

            if (label)
                str += '- ' + label.DisplayName + '<br />';
        }
    }
}

This works great! Problem is, one of the common data structures in my application is a dynamic table where I can create multiple rows, similar to below. It is a table with dynamically created rows where users can add more rows to:

<table>
    <tr ng-repeat="fee in Fees" ng-form="FeeForm">
         <td><input type="text" name="FeeName" ng-model="fee.Name" /></td>
         <td><input type="text" name="FeeValue" ng-model="fee.Value" /></td>
    </tr>
</table>

What I want to do in this case is output the table name if any of the fields in the table are invalid. This actually works somewhat - the function above recognises the form name as erroneous and I can map the form name to the table name to output what I want.

The problem is - as soon as one row in the table is fully valid, all the forms in the table are considered valid (I assume because they are all named the same). form.FeeForm.$invalid is false as soon as one of the FeeForms becomes valid.

Wondering if there's any tweaks I can make to handle this situation? Hope what I'm asking kind of makes sense :/

For a start, why don't you try naming your inner forms like ng-form="FeeForm{{$index}}"? This will add the index to the name and at least resolve the form name conflict. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jul 31, 2014 at 7:20
Does this post help: stackoverflow.com/questions/24726105/… — Michael Kang
– Michael Kang, Commented Jul 31, 2014 at 7:34

Manoj Verma · Accepted Answer · 2017-11-26 15:58:20Z

0

 var fieldStatus = false;
        $scope.fieldsMsgContainer = $('<div>');
        angular.forEach(angular.element(".invalid-cls"), function(value) {
            var elem = angular.element(value);
            if (!elem.val()) {
                var errorMsg = "";
                $("<div>").addClass("errorField").html(anacReservationMessages.errorMsg.fieldInvalid + elem.closest('.row').find('label').html()).appendTo($scope.fieldsMsgContainer);
                fieldStatus = true;
                errorMsg = 'Specific Error message ' + elem.closest('.row').find('label').html();
            }
        });

answered Nov 26, 2017 at 15:58

Manoj Verma

5381 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manoj Verma Over a year ago

replace anacReservationMessages.errorMsg.fieldInvalid according to your error message.

Collectives™ on Stack Overflow

Angular validation - outputting invalid field names to user

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related