Angular中ngModel与复选框绑定异常问题求助

看起来你遇到的问题根源有两个：label标签内部嵌套文本输入框，以及多个checkbox使用了相同的name属性，这两者共同导致了ngModel绑定异常和文本消失的问题。

问题原因拆解 #

1. 嵌套输入框干扰label行为：你把文本输入框<input class="checkbox-text">放在了<label>内部，而label的for属性关联着对应的checkbox。当点击label区域（包括里面的文本输入框）时，浏览器会触发checkbox的状态切换，同时文本输入框的焦点变化会干扰Angular的ngModel双向绑定机制，导致文本内容意外消失。
2. 重复的name属性：所有checkbox都使用了name="customCheckbox"，这会让Angular在处理表单控件时产生混淆——同name的控件会被视为同一组，但你需要每个checkbox独立绑定到item.isCorrect，重复的name会导致选中状态只同步到最后一个控件。

修复后的代码 #

<div *ngIf="question.typeQuestions==1">
  <div *ngFor="let item of question.selectedAnswer; let i = index" class="checkbox-variable">
    <!-- 为每个checkbox设置唯一的id和name -->
    <input 
      type="checkbox" 
      id="customCheckbox{{i}}" 
      name="customCheckbox-{{i}}" 
      class="checkbox-square" 
      [(ngModel)]="item.isCorrect"
    >
    <!-- label仅关联checkbox，不再嵌套文本输入框 -->
    <label class="checkbox-label" for="customCheckbox{{i}}"></label>
    <!-- 文本输入框独立放置，避免label点击事件干扰 -->
    <input 
      class="checkbox-text" 
      type="text" 
      [(ngModel)]="item.text"
      placeholder="输入答案内容"
    >
  </div>
</div>

关键修改说明 #

• 移出嵌套的文本输入框：将文本输入框从label中分离出来，这样点击label只会触发checkbox的状态切换，不会干扰文本输入的ngModel绑定，解决文本消失的问题。
• 设置唯一的name和id：用索引i为每个checkbox生成唯一的name和id，确保Angular能正确识别每个独立的表单控件，保证选中状态能正确同步到对应的item.isCorrect。
• 优化布局逻辑：让checkbox、label和文本输入框的职责更清晰，后续样式调整也会更方便。

如果需要让label显示一些提示文本（比如"标记为正确答案"），可以直接在label标签内添加静态文本，不会影响绑定逻辑。

内容的提问来源于stack exchange，提问作者DerzkeyBK