[英]Disable checkboxes in a table based on formvalues angular
I have a Form field named Value .我有一个名为Value的表单字段。
I have a add button which duplicates the form.我有一个复制表单的添加按钮。
I have a table button which shows and a back button to hide the table.(Forget abt the delete button)我有一个显示表格的按钮和一个隐藏表格的后退按钮。(忘记删除按钮)
The table has a column that is full of checkboxes.该表有一列充满了复选框。 Now in the table, I will click as many checkboxes as the value I entered in the value-form.
现在在表格中,我将单击与我在值表单中输入的值一样多的复选框。
Say for example if I had entered 2 in that form I can click up to 2 checkboxes in that table.例如,如果我在该表单中输入了 2,我最多可以单击该表中的 2 个复选框。
After that then I come back to the form by clicking the back button.之后,我通过单击后退按钮返回表单。
My problem:我的问题:
Now my problem is When I click add button again and if I duplicate another value form and enter another value 3 and if I go check the table you can see that the checkboxes are unchecked.现在我的问题是当我再次单击添加按钮时,如果我复制另一个值表单并输入另一个值 3,并且如果我 go 检查表格,您会看到复选框未选中。 Instead what I want is that the checkboxes which I have checked earlier before should be disabled.
相反,我想要的是我之前检查过的复选框应该被禁用。
I have explained my problem as clearly as I could.我已经尽可能清楚地解释了我的问题。 If you have a doubt about my question please comment.
如果您对我的问题有疑问,请发表评论。 Thanks.
谢谢。
Note: In my stackblitz I have posted a sample of my code in a simple(without rich UI) way注意:在我的 stackblitz 中,我以简单(没有丰富的 UI)的方式发布了我的代码示例
Stackblitz: https://stackblitz.com/edit/angular-ivy-g8cty1?file=src%2Fapp%2Fapp.component.ts Stackblitz: https://stackblitz.com/edit/angular-ivy-g8cty1?file=src%2Fapp%2Fapp.component.ts
As my understanding you want to keep your checkboxes checked even after table closed and reopened,据我了解,即使在表格关闭并重新打开后,您也希望保持选中复选框,
You can do this with event binding:您可以使用事件绑定来做到这一点:
<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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.