ng-disabled on inputs from ng-repeat loop

Question

I'm displaying inputs basing on array like this

 <div data-ng-repeat="n in langInput.values">
    <input type="text"
           id="auction_name_{{n.selected}}"
           class="form-control"
           name="auction_name_{{$index}}"
           data-ng-model="inputs.auction_name[$index + 1]"
           data-ng-minlength="5"
           data-ng-maxlength="60"
           required />
    <span data-ng-show="sellItem['auction_name_'+$index].$error.required">Wymagane!</span>

It also give's me ability of angularjs validation. Next after <form> is closed I want to create "next" button but I also want to do validation there so if user don't fullfill required inputs he will not be able to click it.

Array which I'm ng-repeating on is:

$scope.langInput = {
    count: 3,
    values: [
        {
            id: "1",
            selected: "pl"
        },
        {
            id: "2",
            selected: "eng"
        }
    ],
    add: function () {
        if (this.count < 7) {
            this.values.push({id: this.count, selected: "eng"});
            this.count += 1;
            console.log(this.values);
        }
    },
    remove: function () {
        if (this.count > 2) {
            this.values.pop();
            this.count -= 1;
            console.log(this.count);
        }
    }
};

I know I can use this ng-disabled directive however I don't know how I can check this inputs which are displayed in loop because its name is changing depending on $index of loop.

I've created plunker

---

My situation is that I know that I can disable button when some of element is invalid by ng-disabled="sellItem.$error" but in my form in real project I have this form much bigger and I have many ways of acomplishing form so in the end when user finish fullfilling form user still got some of inputs which are not even shown invalid.

So I can't use ng-disabled="sellItem.$error" because after user complete form he still got invalid inputs in background.

I also can not split form to many little forms because it will call 1 endpoint on submit.

What I did in real project is inject 3 different buttons and show them on correct step. Every of this button need to have ng-disabled to not let user to go to next step without completing step' inputs.

So intead of ng-disabled="sellItem.$error" I need to specify all inputs in ng-disabled of one step ( which is about 5 inputs ).

So it would look something like this:

ng-disabled="sellItem.first_input.$error && 
sellItem.second_input.$error && ..."

And I would do this but then I come to problem that I can't "loop" inside of ng-disabled and I want to "loop" inside it because names of inputs are generated by JS

name="auction_name_{{n.id}}"

they and not constant they change, user can add more inputs and delete them

at page start I have two inputs which after JS run are name="auction_name_1" and name="auction_name_2" (due to binding interpolated value) and then user can and third one name="auction_name_3"so I can't also hardcode them within ng-disabled.

Answer 1

I don't know how I can check this inputs which are displayed in loop because its name is changing depending on $index of loop.

Generally one stores the input as a property of the object in the array so that it stays with the object as its position in the array changes.

Also use the id property of the object:

<form name="sellItem" ng-submit="submit()">
    <div data-ng-repeat="n in langInput.values">
        <input type="text"
             id="auction_name_{{n.selected}}"
             class="form-control"
             ̶n̶a̶m̶e̶=̶"̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶{̶{̶$̶i̶n̶d̶e̶x̶}̶}̶"̶
             name="auction_name_{{n.id}}"
             ̶d̶a̶t̶a̶-̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶i̶n̶p̶u̶t̶s̶.̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶[̶$̶i̶n̶d̶e̶x̶ ̶+̶ ̶1̶]̶"̶
             data-ng-model="n.input"
             data-ng-minlength="5"
             data-ng-maxlength="60"
             required />
        <span data-ng-show="sellItem['auction_name_'+n.id].$error.required">Wymagane!</span>
        <span data-ng-show="sellItem['auction_name_'+n.id].$error.minlength">Za krótkie!</span>
        <span data-ng-show="sellItem['auction_name_'+n.id].$error.maxlength">Za długie!</span>
    </div>
    <button type="submit" ng-disabled="sellItem.$error">
          {{Submit}}
    </button>
</form>

Be sure to generate unique values for the id property.

---

Update

Added Submit button.

For more information, see

• AngularJS Developer Guide - forms
• AngularJS <form> Directive API Reference
• AngularJS ng-submit Directive API Reference