How to validate dynamically added ion-input in Ionic

Question

I am working with dynamic ion-input , there are two fields, which will be shown to the user and the user can add or remove fields.

The maximum is five fields and minimum is two. I have another input, which I can validate properly for required validation, but how can I validate dynamically added fields at runtime, which can be 2, 3, 4 or 5?

My code, for which I have done validation and the dynamic field are below. Can anyone please help me to resolve this?

single 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 a reactive form. FormArray become invalid if any one of the controls inside it is invalid ( angular docs ).

First, define the form 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 StackBlitz example (pages/home).