title: How to validate dynamically added ion-input in Ionic
body: <p>I am working with dynamic <a href="https://ionicframework.com/docs/api/components/input/Input/" rel="nofollow noreferrer">ion-input</a>, there are two fields, which will be shown to the user and the user can add or remove fields.</p>
  
  <p>The maximum is five fields and minimum is two. I have another input, which I can validate properly for <strong>required</strong> validation, but how can I validate dynamically added fields at runtime, which can be 2, 3, 4 or 5?</p>
  
  <p>My code, for which I have done validation and the dynamic field are below. Can anyone please help me to resolve this?</p>
  
  <p>single input field</p>
  
  <pre><code>&lt;div text-center [formGroup]="pollQuesValid"&gt;
      &lt;ion-item&gt;
          &lt;ion-input type="text" formControlName="questTxt" [(ngModel)]="question"&gt;
          &lt;/ion-input&gt;
      &lt;/ion-item&gt;
      &lt;ion-item *ngIf="!pollQuesValid.controls.questTxt.valid &amp;&amp; submitAttemptQues" text-center text-wrap no-lines&gt;
          &lt;p style="color: red"&gt;{{"quesValid" | translate }}&lt;/p&gt;
      &lt;/ion-item&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>dynamic fields</p>
  
  <pre><code>&lt;div&gt;
      &lt;ion-item *ngFor="let choice of custOpts; let i = index;"&gt;
          &lt;ion-label color="primary" floating&gt;{{choice.hint}} {{i+1}}&lt;/ion-label&gt;
          &lt;ion-input type="text" [(ngModel)]="choice.ch"&gt;&lt;/ion-input&gt;
          &lt;ion-icon class="remove" item-end name="md-remove" *ngIf="i&gt;=2" (click)="removecustOpts()"&gt;&lt;/ion-icon&gt;
      &lt;/ion-item&gt;
      &lt;div *ngIf="custOpts.length &lt; 5" padding&gt;
          &lt;button ion-button icon-only (click)="addNewChoice()"&gt;
              &lt;ion-icon name="md-add"&gt;&lt;/ion-icon&gt;
            &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>