多个单选按钮组在一个 Angular 响应式表单中

Question

我在模板表单中看到了这个问题的答案。但是 none 使用反应式表单中的 FormGroups 解决了这种情况。

当我 select 来自页面上一个表单的单选按钮时，它取消了 select 默认单选按钮在完全独立的窗体和 FormGroup 中。为什么会这样，我该如何解决？（我特意把所有东西都分开了，连方法调用也不例外）

这是 stackblitz： Stackblitz

Answer 1

单选按钮按名称分组，在您的示例中，您没有提供任何名称，因此所有单选按钮都被分组为单个单选按钮 group.Add 每个单选按钮的名称，以避免取消选择其他按钮。

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

Forked Working Example

Answer 2

在基本的 HTML 中，单选按钮总是与 name 属性分组，一旦所有单选按钮具有相同的 name 属性，它们就形成一个 Radio Group . 这是我们必须做的事情，在你的 app-radio 组件中将 name 属性作为 @Input() 并将其传递给它的模板，当你想将它用作 Radio Group，将相同的 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>

多个单选按钮组在一个 Angular 响应式表单中

Multiple radio button groups in one Angular Reactive form

radio-button

angular

angular-reactive-forms