Array created by select in HTML cannot be read because undefined

Ionic Framework ionic-v3
1

Just like it sounds plus i can still display the entire array in the DOM way before trying to access it using some directive in the html itself to validate the submit, this is my code:

template

<ion-header>

  <ion-navbar>
    <ion-title>Formulario de registro</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding >

<!-- MY INSTINC TELLS ME THAT THE PROBLEM IS IN THE FORM SOMEHOW SOMEWAY, SO I GUESS THE CODE ABOVE HAS NOTHING TO DO WITH THIS-->
<form #f="ngForm" (ngSubmit)="goToAddress(f)">
  <ion-list>
    <!-- NORMAL SELECT-->
    <ion-item>
      <ion-label>Interested</ion-label>
      <ion-select
        interface="popover" 
        ngModel
        name="interesExp"
        required>
          <ion-option value="false">No</ion-option>
          <ion-option value="true">Yes</ion-option>
      </ion-select>
    </ion-item>
    <!-- so far so good -->
    <ion-item *ngIf="f.value.interesExp == 'true'">
      <ion-label>Sims as a gift</ion-label>
      <ion-select
        interface="popover"        
        ngModel
        name="regalaSims"
        required>
          <ion-option value="false">No</ion-option>
          <ion-option value="true">Yeah</ion-option>
      </ion-select>
    </ion-item>

    <!-- we are in the heaven here-->

    <ion-item *ngIf="f.value.regalaSims=='true'">
      <ion-label>want some items</ion-label>
      <ion-select 
        interface="popover"        
        ngModel 
        name="autorizaProp"
        required>
          <ion-option value="false">No</ion-option>
          <ion-option value="true">Yea</ion-option>
      </ion-select>
    </ion-item>

      <!-- HERE COMES THE DARK MAGIC-->      
      <ion-item *ngIf="f.value.autorizaProp=='true'">
        <ion-label>Select Items recived</ion-label>
        <ion-select 
          ngModel 
          name="itemsEntregados"
          multiple="true" 
          required>
            <ion-option value="na">Ninguno</ion-option>
            <ion-option value="col30cms">Colgante 30 cms</ion-option>
            <ion-option value="sti30cms">Sticker 30 cms</ion-option>
            <ion-option value="sti15cms">Sticker 15 cms</ion-option>
        </ion-select>
      </ion-item>
    <!-- the information selected should be contained on 'itemsEntregados' in the form of an array-->
      <ion-item>
        <p>{{f.value.itemsEntregados[0]}}</p>        
      </ion-item>
    <!-- the code above works perfect, and tells me the information gathered from the user-->
    <!--but in the next lines comes the main disaster, it tells me that the slot [0] doesnt exist, ive tried in other ways too:
        f.value.itemsEntregados['0']
        f.value?.itemsEntregados[0]
    but apparently it just doesnt exist for angular-->
      
      
      
      <ion-item *ngIf="(f.value.itemsEntregados)? f.value.itemsEntregados[0]: false" 
        color="danger" 
        outline>
        <!-- my validation should be like this *ngIf="f.value.itemsEntregados[0] == 'na'" -->
          <p>Whatever, here should be the true panic written on text, but it doesnt work anyways :( </p>
      </ion-item>

    </ion-list> 
    <!-- If you comment the last item, the code should run just fine, and HTML should print the selected values for the user-->    
    <button ion-button [disabled]="!f.valid">Submit</button>
  </form>


</ion-content>

This is the error im getting

TypeError: Cannot read property '0' of undefined
    at Object.eval [as updateRenderer] (ng:///AppModule/FormServicePage.ngfactory.js:416:66)
    at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:14730:21)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13866:14)
    at callViewAction (http://localhost:8100/build/vendor.js:14211:21)
    at execEmbeddedViewsAction (http://localhost:8100/build/vendor.js:14169:17)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13862:5)
    at callViewAction (http://localhost:8100/build/vendor.js:14211:21)
    at execComponentViewsAction (http://localhost:8100/build/vendor.js:14143:13)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13867:5)
    at callViewAction (http://localhost:8100/build/vendor.js:14211:21)
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 5.0.3
Angular Compiler CLI: 5.0.3
Node: 8.9.4
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Mobile Safari/537.36

Please help me, ive been several hours trying to figure out whats wrong here… I usually never make a topic bcoz there is always someone with the same kind of problems in the world with an openned topic but couldnt find one that fits in this case.

2

The problem should be with this line (actually it appears twice):

f.value.itemsEntregados[0]

You try to access the value at index 0 of the array, but for whatever reason f.value.itemsEntregados is undefined and that’s causing the error!

3

You mean:

<ion-item>
       <p>{{f.value.itemsEntregados[0]}}</p>        
</ion-item>

?, because the only reason I’m using that

is to show you guys that at this point, I can use the information gathered by the “select[multiple=true]”, but the problem is I cant access that information with the directive *ngIf.

Look at the next item:

<ion-item *ngIf="(f.value.itemsEntregados)? f.value.itemsEntregados[0]: false" 
        color="danger" 
        outline>
        <!-- my validation should be like this *ngIf="f.value.itemsEntregados[0] == 'na'" -->
          <p>Whatever, here should be the true panic written on text, but it doesnt work anyways :( </p>
      </ion-item>

Here on ngIf I could switch the condition to

*ngIf="f.value.itemsEntregados[0] == 'na'"

And still wouldn’t be able to validate the data. What would you suggest me to do?

4

The problem might be that f.value.itemsEntregados[0] already throws up an error as you try to access an element of an undefined object.

A better check in that case would be to test if f.value.itemsEntregados !== undefined I think!

5

Actually it didnt resolve the problem completly but it helped a lot to find an alternative solution dude… Thx
I know this is odd, I’m kinda new in this world, but I didn’t knew the operator !==, trying to find out what is it, I found === (which I didn’t know neither)… I would appreciate a lot if u could give me a tl:dr explanation of what the operator validates. Anyways ty so much

6

== and === are doing more or less the same, but they work on a different way inside JavaScript. You can checkout this SO comment for an idea!

Basically, using 3 like === or !== is a more strict check and most of the time preferred then using != or ==, but of course you should know what you compare and expect some trouble if you change all checks to triple equals :smiley:

1 Like