Ng-disabled按钮基于两种不同的形式

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:

在处理项目时,我遇到了一个问题,我需要禁用一个按钮,只要有2个不同的表(行中有ng-repeat,而每行有一个必需的输入)仍然有空字段。所以基本上:

<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.

这有效,但是如果我需要将两个表放在不同的表格中呢?例如autoForm和manualForm?我是否需要将实际按钮放在表单标签中?因为如果我把它放在它之外它似乎不起作用。

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

如果以前曾经问过我,我很抱歉,但我找不到它。 Ty提前。

1 个解决方案

#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

只要表在同一范围内,您实际上不需要表单标记。你可以在ng-disabled指令中检查两个输入字段的值,并相应地禁用它,例如你可以在这里使用

<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

在这种情况下,按钮仅在两个输入类型都被填充时启用