NativeScript/Angular – TypeError: Cannot read property 'Symbol' of undefined

Issue

I’ve got a page component which has a FormBuilder form:

public adForm: FormGroup = this.fb.group({
  questions: this.fb.array([])
});

I pass questions down to a <questions> component:

<questions [questions]="adForm.get('questions')"></questions>

Which has a @Input() questions: FormArray; and uses this template:

<StackLayout orientation="vertical">
  <!-- If I comment out listview then it doesn't throw the error -->
  <ListView [items]="questions">
    <ng-template let-question="item">
      <Label [text]="question.model"></Label>
    </ng-template>
  </ListView>
  <Button class="btn btn-md btn-primary" text="Add question" (tap)="addQuestion()"></Button>
</StackLayout>

The problem I’m facing is that the ListView bit throws this error:

TypeError: Cannot read property 'Symbol' of undefined

If I comment that section out then it doesn’t throw the error.

I know it has something to do with the questions form array, but I haven’t been able to figure out what. It is defined so it shouldn’t be an issue having to do with something getting undefined instead of an empty array..

Note that this error is being thrown directly on component init. I’ve logged questions in the ngOnInit and it’s not undefined.

What am I doing wrong?

Solution

I completely forgot that if I pass down a form array I don’t actually get the raw value which is the array.. So in the ListView I either have to do questions.value or questions.controls in order to loop them.

I hope this helps someone else in the future.

Answered By – Chrillewoodz

Answer Checked By – Marie Seifert (AngularFixing Admin)