Enabling ng-disabled within an ng-repeat loop

Question

Enabling ng-disabled within an ng-repeat loop

I'm facing an issue with a form that is nested inside an ng-repeat directive. The form should only be enabled if a specific field (in this case a select dropdown) is selected, but for some reason, it's not working as expected. Can anyone provide a solution to fix this problem?

<form name="myForm">    
        <div ng-repeat="item in data">
            <select ng-model="name" required ng-options="r.id as r.name for r in list">
                <option value="">--Select---</option>
            </select>    
            <button class="button" ng-click="save()" ng-disabled="myForm.$invalid">Save</button>
        </div>    
    </form>

javascript angularjs

Answer 1

Answer №1

Utilize the ng-form directive, a detailed guide can be found here

<form name="myForm" novalidate>  
    <div ng-repeat="item in data">

        <ng-form name="testForm">
            <select ng-model="name" required ng-options="r.id as r.name for r in list">
            <option value="">--Select---</option>
            </select>    
            <button class="button" ng-click="save()" ng-disabled="testForm.$invalid">Save</button>
         </ng-form>

    </div>    
</form>

Check out this demo on Plunker

For further clarification, refer to this article

Answer 2

Utilize the ng-form directive, a detailed guide can be found here

<form name="myForm" novalidate>  
    <div ng-repeat="item in data">

        <ng-form name="testForm">
            <select ng-model="name" required ng-options="r.id as r.name for r in list">
            <option value="">--Select---</option>
            </select>    
            <button class="button" ng-click="save()" ng-disabled="testForm.$invalid">Save</button>
         </ng-form>

    </div>    
</form>

Check out this demo on Plunker

For further clarification, refer to this article

Answer 3

Answer №2

Since your form is nested inside ng-repeat, you will end up with multiple forms bound to $scope all named myForm (which will be overwritten).

To solve this, give each form a unique name within the ng-repeat.

For example:

<form name="myForm{{$index}}">

Then, on your button:

<button class="btn-submit" ng-click="submit()" ng-disabled="myForm{{$index}}.$invalid">Submit</button>

Answer 4

Since your form is nested inside ng-repeat, you will end up with multiple forms bound to $scope all named myForm (which will be overwritten).

To solve this, give each form a unique name within the ng-repeat.

For example:

<form name="myForm{{$index}}">

Then, on your button:

<button class="btn-submit" ng-click="submit()" ng-disabled="myForm{{$index}}.$invalid">Submit</button>

Answer 5

Answer №3

To make your code more organized, consider assigning a name to each select element. This way, you can easily identify and handle field errors individually:

<form name="myForm">
    <div ng-repeat="item in data">
        <select ng-model="name" name="name{{$index}}" required ng-options="r.id as r.name for r in list">
            <option value="">--Select---</option>
        </select>
        <button class="button" ng-click="save()" ng-disabled="myForm['name' + $index].$invalid">Save</button>
    </div>
</form>

Check out the live example here: http://plnkr.co/edit/RVY39iMv3dy96Cuw4q6B?p=info

Answer 6

To make your code more organized, consider assigning a name to each select element. This way, you can easily identify and handle field errors individually:

<form name="myForm">
    <div ng-repeat="item in data">
        <select ng-model="name" name="name{{$index}}" required ng-options="r.id as r.name for r in list">
            <option value="">--Select---</option>
        </select>
        <button class="button" ng-click="save()" ng-disabled="myForm['name' + $index].$invalid">Save</button>
    </div>
</form>

Check out the live example here: http://plnkr.co/edit/RVY39iMv3dy96Cuw4q6B?p=info

Enabling ng-disabled within an ng-repeat loop

Answer №1

Answer №2

Answer №3

Similar questions

Show data based on the chosen destination

The two divs are positioned on top of one another, with the link in the bottom div being unclickable

Best practices for utilizing the getTile() method within Google Maps

"Using the check function in JavaScript to determine if a value

Using Jquery to dynamically add an active class to a link if it matches the current URL

Utilizing object UUID keys to associate products in VueJS

Issue with Angular 2 (Ionic 2): Struggling to properly display Component within Page

Personalized parallax design

What is the best way to choose the right value based on parameters?

Async function captures error being thrown

Employing Isotope/jQuery for organizing posts on Tumblr in columns with the ability to infinitely scroll

Am I on the right track with my service definition in Angular?

Guide to removing a particular textfield from a table by clicking a button with ReactJS and Material UI

Retrieving string-based JSON information

How does the 'Route' parameter serve in the Restangular methods oneUrl() and allUrl()?

Retrieving a specific Project ID from Asana Task API using Node.js and parsing the JSON response

What is preventing me from making a call to localhost:5000 from localhost:3000 using axios in React?

JavaScript for validating forms in PHP

What could be causing the bootstrap 4 col-md-3 block to shrink when using position fixed?

Troubleshooting Cross-Origin Resource Sharing problem with Stripe API integration in Angular