title: Radio button in Angular Reactive formArray - Select one item in an array
body: <p>I'm having a formArray namely "address" and this will be a dynamic, once the user clicks the "Add Address" button immediately one address form will add. Each address form has one radio button - User needs to select any of the address has a PRIMARY address (i.e., User needs to select one item in an array).</p>
  
  <p>I refereed the following question but it now full-fill my requirement <a href="https://stackoverflow.com/questions/51427333/angular-formarray-radio-buttons">Angular formArray radio buttons</a>
  in the said question each item has a group of radio button (i.e., selection within an item)</p>
  
  <p>Working code is available in <strong>StackBlitz</strong> : <a href="https://stackblitz.com/edit/angular-reactiveform-radiobutton-in-arrayform" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-reactiveform-radiobutton-in-arrayform</a></p>
  
  <p>Source Code: AppComponent.ts</p>
  
  <pre><code>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 &lt;FormArray&gt;this.userForm.get('address');
    }
  
    addAddress(): void {
      this.addressArray.push(this.addAddressGroup());
    }
  
    removeAddress(index: number): void {
      this.addressArray.removeAt(index);
    }
  }
  </code></pre>
  
  <p>Source Code: AppComponent.html</p>
  
  <pre><code>&lt;form class="example-form" [formGroup]="userForm"&gt;
    &lt;div&gt;
      &lt;mat-card class="example-card"&gt;
        &lt;mat-card-header&gt;
          &lt;mat-card-title&gt;Users Creation&lt;/mat-card-title&gt;
        &lt;/mat-card-header&gt;
        &lt;mat-card-content&gt;
          &lt;div class="primary-container"&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput placeholder="First Name" value="" formControlName="firstName"&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput placeholder="Last Name" value="" formControlName="lastName"&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div formArrayName="address"&gt;
            &lt;div class="address-container" *ngFor="let group of addressArray.controls; let i = index;"
              [formGroupName]="i"&gt;
              &lt;fieldset&gt;
                &lt;legend&gt;
                  &lt;h3&gt;Address: {{i + 1}}&lt;/h3&gt;
                &lt;/legend&gt;
                &lt;mat-radio-button class="example-radio-button" value="true" checked="true" formControlName="isPrimary"&gt;
                  Primary
                &lt;/mat-radio-button&gt;
                &lt;div&gt;
                  &lt;mat-form-field&gt;
                    &lt;input matInput placeholder="Street" value="" formControlName="street"&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field&gt;
                    &lt;input matInput placeholder="City" value="" formControlName="city"&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field&gt;
                    &lt;input matInput placeholder="State" value="" formControlName="state"&gt;
                  &lt;/mat-form-field&gt;
                &lt;/div&gt;
              &lt;/fieldset&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-row org-desc-parent-margin"&gt;
            &lt;button mat-raised-button (click)="addAddress()"&gt;Add more address&lt;/button&gt;
          &lt;/div&gt;
        &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;mat-card class="pre-code"&gt;
    &lt;mat-card-header&gt;
      &lt;mat-card-title&gt;Users Information&lt;/mat-card-title&gt;
    &lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;pre&gt;{{userForm.value | json}}&lt;/pre&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/UZge6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UZge6.png" alt="enter image description here"></a></p>
  
  <p>Kindly assist me how to select an address as a PRIMARY out of N number of address. Only one of the address property "<code>isPrimary</code>" should be <code>true</code> other items and all should be <code>false</code></p>