How to check dynamically added ion input in ion

Question

I work with dynamic ion input , there are two fields that will be shown to the user, and the user can add or remove fields.

A maximum of five fields, and a minimum of two. I have another input that I can validate correctly for the required validation, but how can I verify dynamically added fields at runtime, which can be 2, 3, 4, or 5?

My code, for which I made a check and a dynamic field, is below. Can someone please help me solve this problem?

one input field

<div text-center [formGroup]="pollQuesValid"> <ion-item> <ion-input type="text" formControlName="questTxt" [(ngModel)]="question"> </ion-input> </ion-item> <ion-item *ngIf="!pollQuesValid.controls.questTxt.valid && submitAttemptQues" text-center text-wrap no-lines> <p style="color: red">{{"quesValid" | translate }}</p> </ion-item> </div> 

---

 pollQuesValid: FormGroup; submitAttemptQues: boolean = false; this.pollQuesValid = formBuilder.group({ questTxt: ["", ([Validators.required])] }); if (this.pollQuesValid.controls.questTxt.valid) { this.submitAttemptQues = false; console.log("question valid"); return true; } else { this.submitAttemptQues = true; console.log('question invalid'); return false; } 

dynamic fields

 <div> <ion-item *ngFor="let choice of custOpts; let i = index;"> <ion-label color="primary" floating>{{choice.hint}} {{i+1}}</ion-label> <ion-input type="text" [(ngModel)]="choice.ch"></ion-input> <ion-icon class="remove" item-end name="md-remove" *ngIf="i>=2" (click)="removecustOpts()"></ion-icon> </ion-item> <div *ngIf="custOpts.length < 5" padding> <button ion-button icon-only (click)="addNewChoice()"> <ion-icon name="md-add"></ion-icon> </button> </div> </div> 

Answer 1

You can use FomrArray to dynamically add and validate FormGroup or FormControl in reactive form. FormArray becomes invalid if any of the controls inside it is invalid ( corner documents ).

First define the shape and initial two fields

 pollQuesValid: FormGroup; customOptions: FormArray; this.pollQuesValid = new FormGroup({ questTxt: new FormControl('question text', Validators.required), options: new FormArray([ new FormControl('',Validators.required), new FormControl('',Validators.required), ]) }); this.customOptions = this.pollQuesValid.get('options') as FormArray; //for iterating dynamic fields using *ngFor 

Then change the HTML markup of dynamic fields like this

 <div text-center [formGroup]="pollQuesValid"> ... <div formArrayName="options"> <ion-item *ngFor="let choice of customOptions.controls; let i = index;"> <ion-label color="primary" floating>Hint {{i+1}}</ion-label> <ion-input type="text" [formControlName]="i"></ion-input> <ion-icon class="remove" item-end name="md-remove" *ngIf="i>=2" (click)="removecustOpts(i)"></ion-icon> </ion-item> <div *ngIf="customOptions.controls.length < 5" padding> <button ion-button icon-only (click)="addNewChoice()"> <ion-icon name="md-add"></ion-icon> </button> </div> </div> </div> 

Here is a working example of StackBlitz (pages / home).