ngFormArray I am getting error with controls

import { Component } from ‘@angular/core’;
import { AbstractControl, FormArray, FormControl, FormGroup } from ‘@angular/forms’;

@Component({
selector: ‘app-ng-form-array-ex’,
templateUrl: ‘./ng-form-array-ex.component.html’,
styleUrls: [’./ng-form-array-ex.component.css’]
})
export class NgFormArrayExComponent{

form = new FormGroup({
topics: new FormArray([])
});

addTopic(topic:HTMLInputElement){
(this.form.get(‘topics’) as FormArray).
push(new FormControl(topic.value));
topic.value=’’;
}
}

  • {{ topi.value }}
</ul>

Object { message: “\u001b[96msrc/app/ng-form-array-ex/ng-form-array-ex.component.html\u001b[0m:\u001b[93m9\u001b[0m:\u001b[93m47\u001b[0m - \u001b[91merror\u001b[0m\u001b[90m TS2339: \u001b[0mProperty ‘controls’ does not exist on type ‘AbstractControl’.\r\n\r\n\u001b[7m9\u001b[0m *ngFor=“let topi of form.get(‘topics’).controls”\r\n\u001b[7m \u001b[0m \u001b[91m ~~~~~~~~\u001b[0m\r\n\r\n \u001b[96msrc/app/ng-form-array-ex/ng-form-array-ex.component.ts\u001b[0m:\u001b[93m6\u001b[0m:\u001b[93m16\u001b[0m\r\n \u001b[7m6\u001b[0m templateUrl: ‘./ng-form-array-ex.component.html’,\r\n \u001b[7m \u001b[0m \u001b[96m ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\u001b[0m\r\n Error occurs in the template of component NgFormArrayExComponent.\r\n” }
message: “\u001b[96msrc/app/ng-form-array-ex/ng-form-array-ex.component.html\u001b[0m:\u001b[93m9\u001b[0m:\u001b[93m47\u001b[0m - \u001b[91merror\u001b[0m\u001b[90m TS2339: \u001b[0mProperty ‘controls’ does not exist on type ‘AbstractControl’.\r\n\r\n\u001b[7m9\u001b[0m *ngFor=“let topi of form.get(‘topics’).controls”\r\n\u001b[7m \u001b[0m \u001b[91m ~~~~~~~~\u001b[0m\r\n\r\n \u001b[96msrc/app/ng-form-array-ex/ng-form-array-ex.component.ts\u001b[0m:\u001b[93m6\u001b[0m:\u001b[93m16\u001b[0m\r\n \u001b[7m6\u001b[0m templateUrl: ‘./ng-form-array-ex.component.html’,\r\n \u001b[7m \u001b[0m \u001b[96m ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\u001b[0m\r\n Error occurs in the template of component NgFormArrayExComponent.\r\n”