title: Angular formArray radio buttons
body: <p>I am attempting to add a radio button group to a FormArray. The issue is that when I select a value, it changes the value for every member of the FormArray. I know this has to do with the formControlName, but <strong>I don't know how to make the formControlName dynamic</strong>. I've looked at <a href="https://stackoverflow.com/questions/48251876/formgroup-containing-radio-buttons-with-an-angular-formarray">this post</a> but it's 4 years old and a little vague; i.e., I couldn't come to a clear answer therefrom.</p>
  
  <p>This is what I currently have:</p>
  
  <h3>TS component</h3>
  
  <pre><code>//inputs and variable initialization
  
  ngOnInit() {
    this.createSensorForm();
  }
  
  createSensorForm() {
      this.sensorForm = this.fb.group({
        ...
        definitions: this.fb.array([this.createDefinition()])
    });
  }
  
  createDefinition(): FormGroup {
    return this.fb.group({
      numeric: [""],
    });
  }
  
  addDefinition() {
    this.definitions = this.sensorForm.get('definitions') as FormArray;
    this.definitions.push(this.createDefinition());
  }
  </code></pre>
  
  <h3>HTML component</h3>
  
  <pre><code>&lt;form [formGroup]="sensorForm" (ngSubmit)="createSensor()"&gt;
    ...
    &lt;div formArrayName="definitions" 
         *ngFor="let definition of sensorForm.get('definitions').controls; let i = index;"&gt;
      &lt;div [formGroupName]="i"&gt;
        ...
        &lt;input type="radio" [value]="true" 
               formControlName="numeric" [(ngModel)]="numeric"&gt; Yes
        &lt;input type="radio" [value]="false" 
               formControlName="numeric" [(ngModel)]="numeric"&gt; No
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;button class="btn btn-primary" type="button" (click)="addDefinition()"&gt;
        &lt;i class="fa fa-plus"&gt;&lt;/i&gt; Add Definition
      &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>