1

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 :/

makeyoupizza
  • 195
  • 1
  • 1
  • 9
  • 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 Jul 31 '14 at 07:20
  • Does this post help: http://stackoverflow.com/questions/24726105/how-to-show-form-input-errors-using-angularjs-ui-bootstrap-tooltip/24781988#24781988 – Michael Kang Jul 31 '14 at 07:34

1 Answers1

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();
            }
        });
Manoj Verma
  • 518
  • 1
  • 5
  • 12