Angular custom-control-input 在循环内的 formControlName 中无法正常工作

Posted 2023-03-13

【中文标题】Angular custom-control-input 在循环内的 formControlName 中无法正常工作

【英文标题】：Angular custom-control-input doesn't work correctly with formControlName inside loop

【发布时间】：2020-12-18 00:44:41

【问题描述】：

我想在 Angular 上应用自定义主题样式，但复选框无法正常工作。

我有这部分代码并且工作得很好：

<tr *ngFor="let item of lists let i=index" [formGroupName]="i">
    <td>
        <div class="form-group">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="form-control" id="field_check"  formControlName="checked">
                <label class="form-control-label"  for="field_check">check</label>
            </div>
        </div>
    </td>
</tr>

但是当我尝试添加自定义类控件时不起作用：

<tr *ngFor="let item of lists let i=index" [formGroupName]="i">
    <td>
        <div class="form-group">
            <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="field_check" formControlName="checked">
                <label class="custom-control-label"  for="field_check">check</label>
            </div>
        </div>
    </td>
</tr>

如何在不丢失class="form-control" 的情况下应用我的class="custom-control-input"？我已经尝试过这个class="form-control custom-control-input" 但没有用

更新

检查元素后我发现了这个：

所以当这是我得到的结果时：

我无法访问 css 代码 custom-control-input 和 form-control how 我可以解决这个问题吗？

【参考方案1】：

它应该可以正常工作，最好是你可以使用检查元素查看控件应用了哪种样式。可能它被表单控制类覆盖。你可能不得不使用！在课堂上很重要。

【讨论】：

应用的样式是自定义控制输入，一切运行良好，但问题是循环中的所有 chackbox 仅更改第一个。

因为 [formGroupName]="i" 不适用于自定义控制输入

@ZINEMahmoud 嘿，你找到解决方案了吗，遇到同样的问题

@Avinash 尝试在 stackblitz 中重现您的问题，我会尝试与您一起解决它！