Dynamically add formControlName for controls in ionic

Ionic Framework ionic-v3
1

Hi all,
I am working in ionic3 and angular 4 js. I created dynamic textbox based on a loop count. Now I want to validate the controls. How can I give formControlName for the dynamic controls. Please help me…

Thanks
Divya

2

What have you tried so far and how did it not meet your expectations?

3

Than you for the response…

In my html I used the code
" <li *ngFor=“let item of createRange(10)”>
<ion-input type=“text” placeholder=“ccc” [formGroupName]=“item” >

"

and in ts file
" createRange(number){
var items: number[] = [];
for(var i = 1; i <= number; i++){
items.push(i);
}
return items;
}}

How can I set the formGroupName for validation?

4

This is exactly what I want too.
I am very new to the ionic as well as angular (or for that matter, javascript too). I am trying to build a messaging app which will have surveys and polls which user will answer.
I followed this tutorial to get single option forms and succeded but the problem is that whenever I press submit button on one survey, all surverys are submitted obviously because all forms have same formControlName. I tried following angular docs on dynamic forms but couldn’t get any clues out of it. Please help if possible. Thank you.

5

Hi,

Try this in ts page

addNewRow() {
// control refers to your formarray
const control = this.form.controls[‘itemRows’];
// add new formgroup
control.push(this.initItemRows());
}

and in html page

          <div class="form-group">
            <ion-label>From</ion-label>
            <ion-item>
             <ion-datetime displayFormat="HH:mm" [(ngModel)]="fromtoday[i]" formControlName="itemname"></ion-datetime>
           	</ion-item>
          </div>        <button class="icona" ion-button icon-only *ngIf="form.controls.itemRows.controls.length >1" (click)="deleteRow(i)">