angular - 如何以 react 形式获取 radio 的选定值

Question

我正在尝试获取单选按钮的 selectedValue 并将其作为 true 与单选文本一起传递。如果选择了选项 1，则 selectedValue 将作为 true 发送，否则为 false。如果选择了选项 2，selectedValue 将作为 true 发送，否则为 false。我无法将其设置为 true。想知道以前是否有人这样做过？

https://stackblitz.com/edit/angular-xfrezb

Answer 1

首先，始终将相关代码作为代码块包含在您的问题中，因为链接往往会随着时间的推移而消失...

但至于你的问题，因为你正在处理几个问题和动态值，我会传递当前的 formArray components 和当前的answer。您需要先将所有表单控件 selectedValue 设置为 false，因为否则切换单选按钮每个最终都会变成 true 单击每个他们。因此，在首先将所有设置为 false 之后，只需将所选的单选按钮设置为 true。所以做这样的事情:

<div *ngIf="question.controls.type.value === 'radio'">
  <p>{{ question.controls.label.value }}</p>
  <div formArrayName="component">
    <div *ngFor="let answer of question.controls.component.controls; 
                 let j = index" [formGroupName]="j">
      <label>
        <input type="radio" name="radio-stacked" 
           (click)="updateSelection(question.controls.component.controls, answer)">
          <span>{{ answer.value.value }}</span>
      </label>
    </div>
  </div>
</div>

然后是您的updateSelection 方法:

updateSelection(formArr, answer) {
  formArr.forEach(x => {
    x.controls.selectedValue.setValue(false);
  });
  answer.controls.selectedValue.setValue(true);
}

你的 fork StackBlitz

PS，您当​​然可以考虑做的是，不要在您的表单对象中拥有所有选项，而只是添加您选择的单选按钮的值。