多个收音机组以一种角反应形式

Question

我看到了此问题的答案，其中包括模板表格。但是，没有一个以反应性形式的formgroup来解决这种情况。

当我从页面上的一个表单中选择一个广播按钮时，它将取消选择默认的无线电按钮 以完全独立的形式和formgroup。为什么这是这样，我该如何修复？ （我故意将所有内容分开，甚至是方法调用）

这是Stackblitz： stackblitz

Answer 1

收音机按钮按名称分组，在您的示例中，您没有提供任何名称，因此所有广播按钮均按单个无线电组分组。每个广播按钮的添加名称以避免取消选择其他按钮。

<div class="rb-wrapper">
  <input
    [id]="id"
    type="radio"
    [name]="name"
    [value]="value"
    [formControl]="ctrl"
    [checked]="checked"
  />
  <p>
    {{ label }}
  </p>
</div>

Answer 2

在基本HTML中，无线电按钮始终与 name 属性分组，一旦所有无线电按钮都具有相同的 name 属性，它们会形成无线电组。
这是我们必须做的事情，请在 @input（）中以> @input（）中的 app-radio component中的组件中的属性，然后将其传递给其模板，当您想将其用作无线电组时，请传递同一组中的所有无线电按钮相同 name 值。

这是您的应用程序的分叉示例。
stackblitz

，这是我们必须做的一些小变化，使这项工作。

// app-radio.ts
export class RadioComponent implements OnInit {
 @Input() label: string;
 @Input() ctrl: FormControl;
 @Input() value: string;
 @Input() id: string;
 @Input() name: string;
 @Input() checked: string;

 ngOnInit() {
    console.log('ctrl', this.ctrl);
 }
}


// app-radio.html
<input
 [id]="id"
 [name]="name"
 type="radio"
 [value]="value"
 [formControl]="ctrl"
 [checked]="checked"
/>

// app.html
<form [formGroup]="frm">
<app-radio id="rc1" name="frm" label="Inputs" value="Inputs" [ctrl]="getRadioOptions()" checked></app-radio>
<app-radio id="rc2" name="frm" label="HTML" value="HTML" [ctrl]="getRadioOptions()" ></app-radio>
<app-radio id="rc3" name="frm" label="Code" value="Code" [ctrl]="getRadioOptions()" ></app-radio>
</form>
<hr>

<form [formGroup]="frm2">
<app-radio id="rc4" name="frm2" label="Inputs2" value="Inputs2" [ctrl]="getRadioOptions2()" checked ></app-radio>
<app-radio id="rc5" name="frm2" label="HTML2" value="HTML2" [ctrl]="getRadioOptions2()" ></app-radio>
<app-radio id="rc6" name="frm2" label="Code2" value="Code2" [ctrl]="getRadioOptions2()" ></app-radio>
</form>