One of the challenges I'm facing is dealing with dynamically created forms on a page. Each row consists of inputs and a button. Is there a way to select/focus on the input by clicking on the entire row (button)? It should be noted that the number of rows can reach up to 300 based on user input.
home.ts
export class HomePage {
public homeForm: FormGroup;
constructor(
public navCtrl: NavController,
public userData: UserDataProvider,
private formBuilder: FormBuilder,
public renderer: Renderer,
public elementRef: ElementRef
) {
this.homeForm = new FormGroup({
bicos: new FormArray([
new FormControl(null)
])
});
addInputs() {
(<FormArray>this.homeForm.controls['bicos'])
.push(new FormControl(null));
}
}
home.html:
<form [formGroup]="homeForm">
<ion-row formArrayName="bicos" *ngFor="let item of homeForm.controls.bicos.controls; let i = index" >
<button id={{i}} ion-button clear style="color: black" class='hidden-button' (click) = "doSomething()">
<ion-col align-self-center col-2>{{i+1}}</ion-col>
<ion-col text-center align-self-center col-5>
<ion-input type="text"></ion-input>
</ion-col>
<ion-col align-self-center col-5>400</ion-col>
</button>
</ion-row>
</form>
I have already explored different approaches, like using directives, but haven't found success yet.