title: FormGroup containing Radio Buttons with an Angular FormArray
body: <p>I have the following code that dynamically adds a form group containing a title and two radio buttons to create a condition, effectively providing its title and whether or not it's an acceptable condition:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export enum Acceptability {
    ACCEPTABLE,
    INACCEPTABLE
  }
  
  export interface Condition {
    title: string;
    acceptability: Acceptability;
  }
  
  export class AddCondition implements OnInit {
  
    form: FormGroup;
    ACCEPTABILITY = Acceptability;
  
    constructor(private fb: FormBuilder) {}
  
    ngOnInit() {
      // build the form
      this.form = this.fb.group({
        conditions: this.fb.array([])
      });
  
    }
  
    get conditions(): FormArray {
      return this.form.get('conditions') as FormArray;
    }
  
    addCondition() {
      this.conditions.push(this.fb.group({
        title: ['', Validators.required],
        acceptability: ['', Validators.required]
      }));
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div formArrayName="conditions"&gt;
    &lt;div *ngFor="let condition of conditions.controls; let i=index" [formGroupName]="i"&gt;
      &lt;input class="form-control" formControlName="title" type="text" placeholder="title"&gt;
      &lt;div class="custom-control custom-radio custom-control-inline"&gt;
        &lt;input type="radio" id="acceptable" formControlName="acceptability" name="acceptability" class="custom-control-input" [value]="ACCEPTABILITY.ACCEPTABLE"&gt;
        &lt;label class="custom-control-label" for="acceptable"&gt;Acceptable&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="custom-control custom-radio custom-control-inline"&gt;
        &lt;input type="radio" id="inacceptable" formControlName="acceptability" name="acceptability" class="custom-control-input" [value]="ACCEPTABILITY.INACCEPTABLE"&gt;
        &lt;label class="custom-control-label" for="inacceptable"&gt;Inacceptable&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button type="button" class="btn btn-outline-dark btn-block" (click)="addCondition()"&gt;
            &lt;i class="fa fa-plus fa-lg mr-3"&gt;&lt;/i&gt;ADD A NEW CONDITION&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that when clicking the ADD A NEW CONDITION button, and the new form group appears, every time I select any radio button in the group array, the corresponding radio button of the first array item in the group is the one that gets selected.</p>