Angular8 ReactiveForms: переключатель кнопки ввода с одинаковым именем в разных FormGroup?

Question

Я пытаюсь создать группу formGroup, которая будет динамически добавлять и удалять вложенные группы FormGroup. Каждая из вложенных формогрупп должна иметь formControl, который отображается в виде переключателя.

Например, это может быть динамический список задач c, и только одна из этих задач может быть помечена как приоритетная.

Пример упрощенного кода может выглядеть следующим образом:

export class AppComponent implements OnInit {
  form = new FormGroup({});
    group1 =  new FormGroup({});
    control1 = new FormControl();

    group2 =  new FormGroup({});
    control2 = new FormControl();

    value: any = {};
    changed = 0;

  ngOnInit() {
      this.form.addControl('group1', this.group1);
      this.form.addControl('group2', this.group2);

      this.group1.addControl('radioInput', this.control1);
      this.group2.addControl('radioInput', this.control2);

      this.form.valueChanges.subscribe( (value) => {this.value = value; this.changed++;});
  }
}

<form [formGroup]="form">

  <div>
      <input type="radio" id="id1" value="value1" [attr.name]="radioInput" [formControl]="control1">
      control1
  </div>

  <div>
      <input type="radio" id="id2" value="value2" [attr.name]="radioInput" [formControl]="control2">
       control2
   </div>

</form>

formValue: {{ value | json }}
<br>
formChangeCount: {{ changed }}

В этом случае шаблон HTML отлично работает и позволяет одновременно активировать только одну радиокнопку. Но в компоненте верхнего уровня formGroup неправильно «добавляет» каждую отмеченную радиокнопку к своему значению, не удаляя предварительно проверенную радиокнопку.

Как я могу заставить formGroup действовать так же, как соответствующий HTML делает?

Код Stackblitz: https://stackblitz.com/edit/angular-v8atmn?file=src%2Fapp%2Fapp.component.html

Answer 1

Измените файл ts на:

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl,FormBuilder,Validators } from '@angular/forms';

@Component({
 selector: "my-app",
 templateUrl: "./app.component.html"
 })
export class AppComponent implements OnInit {

radioForm: FormGroup;
constructor(private fb: FormBuilder) {}


 createForm() {
    return this.fb.group({
     radioInput: ['', Validators.required]
    })
  }
print(){
 console.log(this.radioForm.value);
 }


 ngOnInit() {
   this.radioForm = this.createForm();
 }
}

И ваш HTML на:

<form [formGroup]="radioForm">

 <div>
  <input type="radio" id="id1" value="value1" formControlName="radioInput">
  control1
 </div>

 <div>
  <input type="radio" id="id2" value="value2" formControlName="radioInput">
   control2
 </div>

</form>
<button class="btn" (click)="print()">Console Log Form</button>

Теперь каждый раз, когда вы выбираете радиокнопку, значение radioInput изменяется! Вы можете видеть это на консоли каждый раз, когда вы нажимаете кнопку