多个单选按钮组在同一次单击时全部切换

只需为每个组指定一个唯一的名称

<div>
  <input [formControl]="ctrlx" type="radio" [value]="true" id="idx" name="a"   
   autocomplete="off"/>
  <label for="idx">Yes</label>

  <input [formControl]="ctrlx" type="radio" [value]="false" id="idy" name="a"   
  autocomplete="off" />
  <label for="idy">No</label>
</div>

你的 HTML 没有一个好的结构。您应该将所有内容包装在一个表单中，用于每个表单。FormGroup

您首先需要创建一个并包含所有 .在这种情况下，您只需要一个 formControl，因为它在无线电之间共享。FormGroupFormControl

@Component({
  ...
})
export class ExampleComponent {
 
  choiceBGroup = new FormGroup({
    choiceB: new FormControl()
  });

  choiceAGroup = new FormGroup({
    choiceA: new FormControl()
  });

}

<form [formGroup]="choiceAGroup">
  <input formControlName="choiceA" type="radio"  value="true" id="ida"/>
  <label for="ida">Yes</label>

  <input formControlName="choiceA" type="radio" value="false" id="idb"/>
  <label for="idb">No</label>
</form>

<form [formGroup]="choiceBGroup">
  <input formControlName="choiceB" type="radio" value="true" id="ida1"/>
  <label for="ida1">Yes</label>

  <input formControlName="choiceB" type="radio" value="false" id="idb1"/>
  <label for="idb1">No</label>
</form>

如果您想以单一形式处理 2 个不同的无线电组。这就是我们需要处理它的方式。我稍微修改了上面的答案。

@Component({
  ...
})
export class ExampleComponent {
myForm: FormGroup;
  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      choiceA = new FormControl(),
      choiceB = new FormControl();
    });
  }

}

<form [formGroup]="myForm">
  <input formControlName="choiceA" type="radio" name="choiceA" value="true" id="ida"/>
  <label for="ida">Yes</label>

  <input formControlName="choiceA" type="radio" name="choiceA" value="false" id="idb"/>
  <label for="idb">No</label>

<br/>

  <input formControlName="choiceB" type="radio" name="choiceB" value="true" id="ida1"/>
  <label for="ida1">Yes</label>

  <input formControlName="choiceB" type="radio" name="choiceB" value="false" id="idb1"/>
  <label for="idb1">No</label>
</form>

您忘记了输入类型 radio 中的属性名称。

由于您有一个自定义窗体控件，因此可以与此答案类似

1. 在组件外部声明一个变量，例如myformNextUniqueId
2. 使用此 myFormNextUniqueId 创建变量名称

有些类似于：

let myformNextUniqueId = 0; //<--outside the component
@Component({
  selector: 'app-checkbox',
  ...
})
export class CheckboxComponent implements ControlValueAccessor {
  name:string="radio"+(myformNextUniqueId++) //<--create a variable "name"

  //you use this "name" to give value to yours ids
  id1 = this.name+'true';
  id2 = this.name+'false';
  ...
}

然后在您的 .html 中使用它

<input [formControl]="ctrl" [id]="id1"
    ...
    [name]="name"
/>
<label ...>yes</label>
<input [formControl]="ctrl" [id]="id2"
    ...
    [name]="name"
/>
<label ...>no</label>

注意：您还可以强制用户将控件的名称指示为属性

constructor(@Optional() @Attribute('name') public name:string){
    if (!name)
      throw new Error("The name attribute it's necessary")
}