Showing different inputs based on an array looks 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">Required!</span>
This setup also enables AngularJS validation. After the <form> tag is closed, I want to add a "next" button. However, I need to validate the inputs before allowing the user to click the button.
The array that I'm using for ng-repeat 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 understand that I can use the ng-disabled directive but I'm unsure how to check these dynamically generated inputs within the loop since their names change based on the $index.
In a real project, disabling the button when any input is invalid using ng-disabled="sellItem.$error" won't work as unseen inputs may remain invalid after form completion.
I have multiple buttons at different steps with unique ng-disabled conditions to prevent advancing without completing each step's inputs.
Instead of using ng-disabled="sellItem.$error", I need to specify all relevant inputs for each step in ng-disabled logic (usually around 5 inputs per step).
For example:
ng-disabled="sellItem.first_input.$error &&
sellItem.second_input.$error && ..."
The challenge arises when trying to loop through inputs dynamically generated by JavaScript within ng-disabled:
name="auction_name_{{n.id}}"
The input names are dynamic as users can add or delete them, complicating hardcoding in ng-disabled.