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

Question

当我不使用表单或正常方法时，它可以正常工作，但是在使用模板驱动的角度表单并在 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",answer:"correct"
        },{
          op:"Four",answer:"wrong"
        },{
          op:"40",answer:"wrong"
        }]
      }]
      

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

Answer 1

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

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