# Angular 4 - Beginner to Pro. Stuck on Reactive Forms -\> Form Array

**URL:** <https://forum.codewithmosh.com/t/angular-4-beginner-to-pro-stuck-on-reactive-forms-form-array/9343>\
**Category:** Angular\
**Created:** [December 21, 2021, 10:33pm UTC](https://forum.codewithmosh.com/t/angular-4-beginner-to-pro-stuck-on-reactive-forms-form-array/9343 "2021-12-21T22:33:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![olieves](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/olieves/32/2852_2.png) [@olieves](https://forum.codewithmosh.com/u/olieves)\
**Post date:** [December 21, 2021, 10:33pm UTC](https://forum.codewithmosh.com/t/angular-4-beginner-to-pro-stuck-on-reactive-forms-form-array/9343/1 "2021-12-21T22:33:51Z")

</div>

I am working on the new-course-component lesson. I am getting _error TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’._

\*8 _ngFor=“let topic of form.get((‘topics’)[‘controls’])”_

The TS file looks like:  
import { FormArray, FormControl, FormGroup } from ‘@angular/forms’;

import { Component, OnInit } from ‘@angular/core’;

@Component({

selector: ‘new-course-form’,

templateUrl: ‘./new-course-form.component.html’,

styleUrls: [’./new-course-form.component.css’]

})

export class NewCourseFormComponent implements OnInit {

form = new FormGroup({

```
topics: new FormArray([])

```

});

constructor() { }

addTopic(topic: HTMLInputElement) {

```
console.log(topic.value);

(this.form.get('topics') as FormArray).push(new FormControl(topic.value));

return this.form.get('topics') as FormArray;

```

}

ngOnInit(): void {

}

}

The html file looks like:

```
<ul class="list-group">
    <li
        *ngFor="let topic of form.get(('topics')['controls'])"
        class="list-group-item" >
    </li>
</ul>

```

Spent several hours looking on other forums. No luck. Does anyone know what this error is?

---

<div class="post-metadata">

**Author:** ![samaty593](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@samaty593](https://forum.codewithmosh.com/u/samaty593)\
**Post date:** [August 29, 2022, 4:16pm UTC](https://forum.codewithmosh.com/t/angular-4-beginner-to-pro-stuck-on-reactive-forms-form-array/9343/2 "2022-08-29T16:16:14Z")

</div>

hi, I too spent quite some time trying to figure out the problem. The thing is the method “controls” exists only in the FormArray class and is not available for the FormGroup class which is why it doesn’t work.

the insctruction: " \*ngFor=“let topic of form.get(‘topics’).controls” apply the control method to a FormGroup class simply because form.get(‘topics’) returns a FormGroup class.

One way around is to cast the FormGroup into a FormArray class.

Good luck.

---

<div class="post-metadata">

**Author:** ![mojeffcodes](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@mojeffcodes](https://forum.codewithmosh.com/u/mojeffcodes)\
**Post date:** [January 31, 2023, 2:18am UTC](https://forum.codewithmosh.com/t/angular-4-beginner-to-pro-stuck-on-reactive-forms-form-array/9343/3 "2023-01-31T02:18:21Z")

</div>

Took some playing with, but seeing/borrowing code from the add method helped. The nesting combined with generics was a bit confusing, but one thing that helped it click was breaking down the “add” method to see that essentially we were adding a FormControl to a FormArray.

Component:

```auto
  getAllTopics(): FormControl[] {
    return (this.newForm.get('topics') as FormArray).controls as FormControl[];
  }

```

Template:

```auto
<li *ngFor="let topic of getAllTopics()"
            class="list-group-item">
            {{ topic.value }}
        </li>

```

Would have saved some time by moving on and refactoring like Mosh did, which updated it to the below:

Component:

```auto
addTopic(topic: HTMLInputElement) {
    this.topics.push(new FormControl(topic.value));
    topic.value = '';
  }

  get topics() {
    return this.newForm.get('topics') as FormArray;
  }

```

Template:

```auto
<li *ngFor="let topic of topics.controls"
            class="list-group-item">
            {{ topic.value }}
        </li>

```

---

<div class="post-metadata">

**Author:** ![pesz](https://avatars.discourse-cdn.com/v4/letter/p/51bf81/32.png) [@pesz](https://forum.codewithmosh.com/u/pesz)\
**Post date:** [November 4, 2023, 3:15pm UTC](https://forum.codewithmosh.com/t/angular-4-beginner-to-pro-stuck-on-reactive-forms-form-array/9343/4 "2023-11-04T15:15:02Z")

</div>

Works for me this way:

`*ngFor="let topic of form.get('topics')?.['controls']"`