angular: Forms: Property does not exist on type AbstractControl

I’m submitting a … (check one with “x”)

[x] bug report

Current behavior When trying to detect valueChanges in a form field it only works when I reference the field in one way, not in the way I would normally use it.

My form setup:

this.myForm = formBuilder.group({
  myfield: ['', Validators.required]
});

This is not working:

this.myForm.controls.myfield.valueChanges
  .debounceTime(400)
  .subscribe(term => {
    console.log(term);
  });

The error I’m getting:

error TS2339: Property 'myfield' does not exist on type '{ [key: string]: AbstractControl; }'.

This however is working:

this.myForm.controls["myfield"].valueChanges
  .debounceTime(400)
  .subscribe(term => {
    console.log(term);
  });

Angular version: 2.0.0-rc.4
Browser: [all]
Language: [TypeScript 1.8.10 | ES5 ]

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 21 (3 by maintainers)

Most upvoted comments

a dirty workaround is to bypass the object interface and just use and array accessor jobForm.get(‘tasks’)[‘controls’]

+43

philpalmieri on Jun 15, 2017

You write it like this.

Change view to:

In the component:

getTasks(jobForm){ return jobForm.get(‘tasks’).controls }

On Sat, Dec 31, 2016 at 10:30 AM, Mikey Diamonds notifications@github.com wrote:

Thanks for the reply @sudharsanmit https://github.com/sudharsanmit.

This code in my template:
<div *ngFor="let task of jobForm.get('tasks').controls; let i=index">
Is causing this error: Property ‘controls’ does not exist on type ‘AbstractControl’. ngc failed

When I compile to ios with this terminal command: ionic build ios

It works as expected in a web browser. Am I using something incorrectly? I followed this great tutorial: https://scotch.io/tutorials/ how-to-build-nested-model-driven-forms-in-angular-2 http://url

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/angular/angular/issues/10192#issuecomment-269874689, or mute the thread https://github.com/notifications/unsubscribe-auth/AP-IYdxJHNEfx8DXlcJuBLnOiC9y4Imyks5rNpFQgaJpZM4JROxT .

+39

sudharsanmit on Dec 31, 2016

I am getting this error with Angular ^4.0.0 with FormArray too

a work around is to use ng build instead of ng build --prod

please fix

+22

johnRambo2k14 on Mar 28, 2017

Can this ticket be reopened? As others have said currently whenever you use FormArray you have to create a wrapping function to in order to ng build.

+16

scottwio on Mar 31, 2017

Template: <div *ngFor="let product of combo.get('products').controls; let i=index;">

Ngc failed:

pages/combodetail/combodetail.ngfactory.ts:706:63
[10:45:01]  Property 'controls' does not exist on type 'AbstractControl'.
[10:45:01]  ngc failed

Line 706: combodetail.ngfactory.ts

const currVal_42:any = this.context.combo.get('products').controls;

So I go to fix the template Template: <div *ngFor="let product of combo.get('products'); let i=index;">

Ngc passed!! Yaay!!

Oops… But I am getting error from Angular2!!! NgFor expects an iterable… Chicken egg situation…

Error: Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.

It works in dev mode without ngc…

Any help appreciated.

sudharsanmit on Dec 1, 2016