Property 'controls' does not exist on type 'AbstractControl' Angular 4 [duplicate]

angular typescript angular2-forms angular4-forms

Based on @Günter Zöchbauer comments , first i changed

myForm.controls['addresses'] to myForm.get('addresses') in both html and typescript

and then based on @yuruzi comment

changed myForm.get('addresses').controls to myForm.get('addresses')['controls']

Its working fine now. Thanks @gunter & yuruzi

angular typescript angular2-forms angular4-forms

You can fix it easily though. Outsource the "get the controls" logic into a method of your component code (the .ts file):

getControls() {  return (this.recipeForm.get('controlName') as FormArray).controls;}

In the template, you can then use:

*ngFor="let ingredientCtrl of getControls(); let i = index"

This adjustment is required due to the way TS works and Angular parses your templates (it doesn't understand TS there).

angular typescript angular2-forms angular4-forms

Change myForm.get('addresses').controls to myForm.get('addresses').value will also fix the issue.

CodeHunter