Dynamic formcontrolname issue while looping

Ionic Framework ionic-v3
1

Hi,
I have an issue with looping dynamic form controls.Can anybody help me on this.How to bind form control name dynamically. I am using angular 2 form builder for creating form.

HTML

<ion-list>
<form [formGroup]="custom_product" (ngSubmit)="onButtonClick(items.name)">
<ion-item *ngFor="let items of productDetails?.options">
	<ion-label *ngIf="items.type == 'drop_down' || items.type=='radio'">{{items?.title}}</ion-label>
	<ion-select *ngIf="items.type == 'drop_down' || items.type=='radio'" formControlName="productoption">
		<ion-option *ngFor="let option of items?.values" value="{{option?.value}}">{{option?.text}}</ion-option>
	</ion-select>
    <ion-input placeholder="{{items?.title}}" *ngIf="items.type == 'field' " formControlName="remarks"></ion-input>
    <ion-textarea placeholder="{{items?.title}}" *ngIf="items.type == 'area' " formControlName="description"></ion-textarea>
</ion-item>
</form>
</ion-list>

TS

   this.custom_product=this.fb.group({
          productoption:[this.custom_option,Validators.required],
          remarks:['',Validators.required],
          description:['',Validators.required]
        });```
2

You can use FormArray for this use case. Here you can find the documentation about it:
https://angular.io/guide/reactive-forms#use-formarray-to-present-an-array-of-formgroups

Another way is using *ngFor="let items of productDetails?.options; let i=index;" and [formControlName]="'productoption' + i"

You have to adjust your formgroup, too. It should be equal to your formcontrol names.

3

@Nexi Thanks for your reply.let me implement just like this:smiley: