Hyu B. February 2016

Ng-disabled button based on two different forms

While working on a project I came across a problem, I needed to disable a button as long as 2 different tables (with an ng-repeat in it for the rows, which in turn had a required input per row) had empty fields still. So basically:

<table class="table table-striped fontsize12">
<thead>
    <tr>
        <th class="width-desc-auto">Description</th>
        <th class="width-reg-auto">Value</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in items">
        <td><h6>{{item.DESCRIPTION}}</h6></td>
        <td>
            <input type="text" class="form-control" ng-model="item.VALUE" 
                   placeholder="{{item.VALUE}}" disabled="true" required
            >
        </td>
    </tr>
</tbody>

And :

    <table class="table table-striped fontsize12">
<thead>
    <tr>
        <th class="width-desc-auto">Description</th>
        <th class="width-reg-auto">Value</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="char in chars">
        <td><h6>{{char.DESCRIPTION}}</h6></td>
        <td>
            <input type="text" class="form-control"
              ng-model="char.VALUE" placeholder="Register Value" required
            >
        </td>
    </tr>
</tbody>

The first one being filled in automatically, but they could still be empty in certain cases and the second one has to be input manually. The actual arrays over which I repeat don't really matter. Right now I solved it by putting a form tag surrounding both of the tables and included the button within that form tag aswell.:

<form name="myForm">
     <table>...</table>
     <table>...</table>
     <span class="pull-right">
         <        

Answers


Rishabh Jain February 2016

you don't actually need a form tag as long as the tables are in the same scope . you can just check for the values of both input fields in ng-disabled directive and disable it accordingly for example here you can use

<button class="btn btn-sm btn-primary" type="button" 
        ng-disabled="!(item.value && char.value)"
>
  Close
</button>

In this case button will only enable when both the input types are filled

Post Status

Asked in February 2016
Viewed 1,971 times
Voted 10
Answered 1 times

Search




Leave an answer