基于两种不同形式的Ng禁用按钮

Question

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">
         <button class="btn btn-sm btn-primary" type="button" ng-disabled="myForm.$invalid">
           Close
         </button>
     </span>
</form>

This works, but what if I needed both tables to be put in a different form? For example autoForm and manualForm? And do I need to put the actual button within the form tag aswell? As it didn't seem to work if I put it outside of it.

My apologies if this has been asked before but I couldn't find it. Ty in advance.

Answer 1

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