由于 ngModel 在 Angular 中选择了两个单选按钮

问题描述

当我没有表单或正常方法时，它工作正常，但在使用模板驱动的角度表单并在 formcontrol 上使用 ngModel 后，我得到了这个错误..

<div class="con" *ngFor="let Qtn of Q; let i = index">
      <p class="question">{{ Qtn.q }}</p>
      <div class="container" *ngFor="let op of Qtn.op">
        <label 
          >
          <input
            type="radio"
            name="{{ i }}"
            value="{{ op.answer }}"
            ngModel
            #{{i}}
          /> {{ op.op }}
        </label>
        
      </div>
      <p #result></p>
      <hr />
    </div>

---

Appservice.ts

Q=[{
        q:"What is the full form of  HTML",op:[{
          op:"Hyper Text MarkuP Language",answer:"correct"
        },{
          op:"Hello talk me less",answer:"wrong"
        },{
          op:"hindi Telugu Marathi Lingo",answer:"wrong"
        }]
      },{
        q:"What is 4 + 4?",op:[{
          op:"4",{
          op:"Four",{
          op:"40",answer:"wrong"
        }]
      }]
      

输出错误是这样的>> enter image description here

解决方法

尝试提供静态 name 属性而不是动态属性。查看docs了解更多信息。

        <label>
          <input
            type="radio"
            name="answer"
            value="{{ op.answer }}"
            ngModel
            #{{i}}
          /> {{ op.op }}
        </label>