Angular formArray radio buttons

Question

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 I don't know how to make the formControlName dynamic. I've looked at this post but it's 4 years old and a little vague; i.e., I couldn't come to a clear answer therefrom.

This is what I currently have:

TS component

//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());
}

HTML component

<form [formGroup]="sensorForm" (ngSubmit)="createSensor()">
  ...
  <div formArrayName="definitions" 
       *ngFor="let definition of sensorForm.get('definitions').controls; let i = index;">
    <div [formGroupName]="i">
      ...
      <input type="radio" [value]="true" 
             formControlName="numeric" [(ngModel)]="numeric"> Yes
      <input type="radio" [value]="false" 
             formControlName="numeric" [(ngModel)]="numeric"> No
    </div>
  </div>
    <button class="btn btn-primary" type="button" (click)="addDefinition()">
      <i class="fa fa-plus"></i> Add Definition
    </button>
</form>

Eliseo · Accepted Answer · 2018-07-19 16:37:48Z

1

<div *ngIf="sensorForm"  [formGroup]="sensorForm" (ngSubmit)="createSensor()>
  <!---first the name of array-->
  <div formArrayName="definitions">
      <!--after the loop using a div, this div has [fromGroupName]=i -->
      <div *ngFor="let definition of sensorForm.get('definitions').controls; 
                  let i = index;" [formGroupName]="i">
          <!--each element, only use formControlName, ¡NOT! [(ngModel)] -->
          <!-- ngModel is for Template driven Form  -->
          <input type="radio" [value]="true" formControlName="numeric" > Yes
          <input type="radio" [value]="false" formControlName="numeric" > No
      </div>
  </div>  
</div>

Your addDefinition is wrong, you have not "this.definitions"

addDefinition() {
    const definitions = this.sensorForm.get('definitions') as FormArray;
    definitions.push(this.createDefinition());
  }

edited Jul 19, 2018 at 16:37

answered Jul 19, 2018 at 16:34

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JED Over a year ago

Worked like a charm. Thanks a million!

Eliseo Over a year ago

be carefull, I update the answer adding the code to addDefinition

Collectives™ on Stack Overflow

Angular formArray radio buttons

TS component

HTML component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

TS component

HTML component

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related