Переключатель в Angular Reactive formArray - Выбрать один элемент в массиве

Question

У меня есть formArray, а именно «адрес», и он будет динамическим, как только пользователь нажмет кнопку «Добавить адрес», сразу будет добавлена ​​одна форма адреса.Каждая форма адреса имеет один переключатель - пользователю необходимо выбрать любой адрес, который имеет ПЕРВИЧНЫЙ адрес (т. Е. Пользователю необходимо выбрать один элемент в массиве).

Я ответил на следующий вопрос, но теперь он полностьюзаполните мое требование Угловые переключатели formArray в указанном вопросе у каждого элемента есть группа переключателей (т. е. выбор внутри элемента)

Рабочий код доступен в StackBlitz : https://stackblitz.com/edit/angular-reactiveform-radiobutton-in-arrayform

Исходный код: AppComponent.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  public userForm: FormGroup;

  constructor(private _fb: FormBuilder) {
    this.userForm = this._fb.group({
      firstName: [],
      lastName: [],
      address: this._fb.array([this.addAddressGroup()])
    });
  }

  private addAddressGroup(): FormGroup {
    return this._fb.group({
      street: [],
      city: [],
      state: [],
      isPrimary: []
    });
  }

  get addressArray(): FormArray {
    return <FormArray>this.userForm.get('address');
  }

  addAddress(): void {
    this.addressArray.push(this.addAddressGroup());
  }

  removeAddress(index: number): void {
    this.addressArray.removeAt(index);
  }
}

Исходный код: AppComponent.html

<code><form class="example-form" [formGroup]="userForm">
  <div>
    <mat-card class="example-card">
      <mat-card-header>
        <mat-card-title>Users Creation</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <div class="primary-container">
          <mat-form-field>
            <input matInput placeholder="First Name" value="" formControlName="firstName">
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="Last Name" value="" formControlName="lastName">
          </mat-form-field>
        </div>
        <div formArrayName="address">
          <div class="address-container" *ngFor="let group of addressArray.controls; let i = index;"
            [formGroupName]="i">
            <fieldset>
              <legend>
                <h3>Address: {{i + 1}}</h3>
              </legend>
              <mat-radio-button class="example-radio-button" value="true" checked="true" formControlName="isPrimary">
                Primary
              </mat-radio-button>
              <div>
                <mat-form-field>
                  <input matInput placeholder="Street" value="" formControlName="street">
                </mat-form-field>
                <mat-form-field>
                  <input matInput placeholder="City" value="" formControlName="city">
                </mat-form-field>
                <mat-form-field>
                  <input matInput placeholder="State" value="" formControlName="state">
                </mat-form-field>
              </div>
            </fieldset>
          </div>
        </div>
        <div class="form-row org-desc-parent-margin">
          <button mat-raised-button (click)="addAddress()">Add more address</button>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
</form>
<mat-card class="pre-code">
  <mat-card-header>
    <mat-card-title>Users Information</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <pre>{{userForm.value | json}}

Пожалуйста, помогите мне, как выбрать адрес как ПЕРВИЧНЫЙ из числа N адресов.Только одно из свойств адреса "isPrimary" должно быть true другими элементами, и все должны быть false