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

Ng-disabled button based on two different forms

本文关键字：ng 按钮 于两种 两种      更新时间：2023-09-26

在处理项目时，我遇到了一个问题，只要 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>

和：

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

第一个是自动填写的，但在某些情况下它们仍然是空的，第二个必须手动输入。我重复的实际数组并不重要。现在，我通过在两个表周围放置一个表单标签来解决它，并将按钮也包含在该表单标签中。

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

这有效，但是如果我需要将两个表都放在不同的形式中怎么办？例如自动表单和手动表单？我是否需要将实际按钮也放在表单标签中？因为如果我把它放在它外面，它似乎不起作用。

如果之前有人问过这个问题，我很抱歉，但我找不到它。提前泰。

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

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

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

相关文章：