根据表单值 angular 禁用 table 中的复选框

Question

我有一个名为 Value 的表单字段。

我有一个 add 按钮可以复制表单。

我有一个显示 table 按钮和一个隐藏 table 的 back 按钮。（忘记删除按钮）

table 有一列充满了复选框。现在，在 table 中，我将单击与在 value-form 中输入的值一样多的复选框。

举例来说，如果我在该表格中输入了 2，我最多可以单击其中的 2 个复选框 table。

之后，我通过单击返回按钮返回表单。

我的问题：

现在我的问题是，当我再次单击 add 按钮时，如果我复制另一个 value 表单并输入另一个值 3，如果我检查 table，您会看到复选框未选中。相反，我想要的是我之前检查过的复选框应该被禁用。

我已经尽可能清楚地解释了我的问题。如果您对我的问题有疑问，请发表评论。谢谢。

注意：在我的 stackblitz 中，我以简单（不丰富 UI）的方式发布了我的代码示例

Stackblitz：https://stackblitz.com/edit/angular-ivy-g8cty1?file=src%2Fapp%2Fapp.component.ts

Answer 1

据我了解，即使在 table 关闭并重新打开后，您仍希望选中您的复选框，

您可以使用事件绑定来做到这一点：

<td>
    input  type="checkbox" id="vehicle2" name="vehicle2" 
      (change)="addCheckValue(i,list.isTicked)"
      [checked]="list.isTicked"
      [disabled]="list.isDisabled">
  </td>


  <td *ngIf="list.isDisabled">
            Already disabled
    </td>



addCheckValue(index,isChecked){
    if(isChecked === undefined){
      isChecked = true
    }
    this.listes[index].isTicked = isChecked;

  }



//disabled checked boxes on close 
this.listes = this.listes.map(e => {
      if (e.isTicked === true) {
        e.isDisabled = true;
      }
      return e;
});

your edited repo

根据表单值 angular 禁用 table 中的复选框

Disable checkboxes in a table based on formvalues angular

javascript

typescript

angular

angular5

angular7