How can I validate an ng-repeated dropdown category selector?

Question

I created a nested category model. In order to select a category for a product, you see a dropdown with the main categories. When you select one, a new dropdown is added to the right with the child categories to the one you selected. This repeats until you reach the last level. When this happens $scope.product.category_id is set. I want to invalidate the whole set of fields when $scope.product.category_id is null.

I've been using angular-bootstrap-show-errors for validation and I tried to mix it with ui-utils to achieve this one, using a custom function: validate_category().

Here's the HTML I used:

<span ng-repeat="parent_id in category_dropdown_parents" show-errors="{ skipFormGroupCheck: true }">
    <select class="form-control" name="category_id"
        ng-init="selected_category[$index] = init_select($index);"
        ng-model="selected_category[$index]"
        ng-options="category.name for category in (categories | filter : { parent_id: parent_id } : true ) track by category.id "
        ng-change="select_category(selected_category[$index], $index)"

        ui-validate="'validate_category()'" // added this to work with ui-utils

        >
    </select> 
    <span ng-if="$index+1 != category_dropdown_parents.length">/</span>
</span>

And this is my simple validation function:

$scope.validate_category = function() {
    return  (   $scope.product.category_id !== null 
            &&  $scope.product.category_id !== undefined);
}

But this is not working. Ideas?

EDIT: I just realized, that the problem with this is that the validation function on ui-validate is executed after the ng-change function, so it's never able to check the $scope.product.category_id update.

@ParvSharma http://plnkr.co/edit/Ou3EtN1Razsj2TDgHLId sorry for the delay. — Mauro, Jun 22 '15 at 13:50

score 4 · Answer 1 · edited Jun 25 '15 at 17:21

4

Your select is using

ng-model="selected_category[$index]"

but the validation function is using

$scope.product.category_id

Shouldn't it be using

ui-validate="'validate_category($index)'"

and

$scope.validate_category = function($index) {
    return($scope.selected_category[$index] !== null 
    && $scope.selected_category[$index] !== undefined);
}

edited Jun 25 '15 at 17:21

Prayag Verma

5,581
3
30
56

answered Jun 24 '15 at 20:46

Brent Washburne

12,904
4
60
82

my `select_category` function triggered on `ng-change`, updates `$scope.product.category_id` when a category with no children is selected. So your approach is essentially the same. I just realized, that the problem with this is that the validation function on `ui-validate` is executed *after* the `ng-change` function. So nothing of these works. – Mauro Jun 26 '15 at 17:09

score 4 · Accepted Answer · answered Jun 26 '15 at 17:15

This is not the ideal answer but it's the best I could get. Shame on me, this was too simple:

<select class="form-control" name="category_id"
    ng-init="selected_category[$index] = init_select($index);"
    ng-model="selected_category[$index]"
    ng-options="category.name for category in (categories | filter : { parent_id: parent_id } : true ) track by category.id "
    ng-change="select_category(selected_category[$index], $index)"

    required // !!!

    >
</select>

That's it, just added the required attribute. The problem with this is that since the I'm not validating product.category_id but just validating all the dropdowns to be not empty. I guess I 'll have to rely on the code on select_category().

How can I validate an ng-repeated dropdown category selector?

2 Answers2