Ionic 3 - Validate inputs with the same name

I am in Ionic 3. I have a JSON feed that has lots of questions in it.

I can grab the feed and display all the questions no problems. I just want to validate the answer areas as not null or not empty. I can target a field like a username or password by name, no problems. In PHP/HTML I’d use a field name of ‘answer[]’ and then check each one in turn. I’m just a bit lost as to how to do this in Ionic.

Thanks in advance.

My JSON feed is this:

{
  "status":"success","data":[
    {"question":"Question 1"},
    {"question":"Question 2"},
    {"question":"Question 3"}
  ]
}

I then set the data like this in the ts:

var JSONObject = myStaticData.data;
this.questions = JSONObject;

Then in view I do this to show them:

<div *ngFor="let question of questions; let i = index;" class="question-item clearfix">
  <div class="question clearfix">
    <span class="number">{{ i + 1 }}.</span>
    <p>{{ question.question }}</p>
  </div>
  <textarea name="question[{{ i }}]" placeholder="Answer copy in here"></textarea>
</div>

How do I validate each textarea to not be empty?

Perhaps you can add an attribute to the question object to hold the answer value and bind it to the text in textarea;

So: on textarea:
[(ngModel)]=‘question.answer’

Then you can have a method
get answeredAll(){
return questions.filter(question=> !question.answered).length === 0
}

I haven’t ran this code or tested it but it will be along those lines

Sounds nearly there, where would the method call go?

Wherever you want to check if all questions have been answered.

Well that’s the exact question I’m asking though, is it not?

In your example, where does the call to ‘get answeredAll(){’ go?

Appreciate your help!

It sounded like you know where to validate but not how.

I can’t advise without knowing what you want to achieve. Is it that you want a button to be enabled when all answers are complete? If so then it would go in the conditional css (<button [disabled]="!answeredAll"…>)

Yes good point. I suppose its when I leave each text area I’ll need to know if its populated and then also, in addition I have a submit button, so a combination of both.

Thanks for getting back to me so fast!

You could use angular template forms:
https://angular.io/guide/forms

Here is an example for your use case:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <form (ngSubmit)="onSubmit()" #questionForm="ngForm">
        <div 
          *ngFor="let question of questions; let i = index;" 
          class="question-item clearfix"
        >
          <div class="question clearfix">
            <span class="number">{{ i + 1 }}.</span>
            <p>{{ question.question }}</p>
          </div>
          <textarea 
            required 
            name="question[{{ i }}]" 
            placeholder="Answer copy in here"
            [(ngModel)]="answers[i]"
          ></textarea>
        </div>
        <button 
          ion-button 
          type="submit" 
          [disabled]="!questionForm.form.valid"
        >
          Submit
        </button>
      </form>
    </ion-content>
  `
})
export class HomePage {
  questions: Array<{ question: string }> = [];
  answers = [];
  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {
    const myStaticData = {
      "status": "success", "data": [
        { "question": "What is your name?" },
        { "question": "What are you working on?" },
        { "question": "What do you want to achieve in the next 10 years?" }
      ]
    };
    const JSONObject = myStaticData.data;
    this.questions = JSONObject;
  }

  onSubmit() {
    alert(JSON.stringify(this.answers));
  }
}