Property 'controls' does not exist on type 'AbstractControl'.

[shammelburg]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@Angular/cli: 1.0.1
node: 7.5.0
os: win32 x64
Windows (10)

Repro steps.

Running the application using ng serve works fine.

using ng build works fine.

when using ng build --prod --aot or ng build --prod I get the error.

It points back to this html file and the controls property??

<div formArrayName="Data">
    <div class="form-group" *ngFor="let field of form.get('Data').**controls**; let i = index">
        <div [formGroupName]="i">
            <div class="col-sm-2">
                <input type="text" class="form-control input-sm text-right" placeholder="Key" formControlName="Name" />
            </div>
            <div class="col-sm-6">
                <input type="text" class="form-control input-sm" placeholder="Value" formControlName="Data" autocomplete="off" />
            </div>
            <div class="col-sm-1">
                <i class="fa fa-trash-o cursor remove-field" title="Remove field" (click)="removeField(i)"></i>
            </div>
        </div>
    </div>
</div>

The log given by the failure.

ERROR in ng:///C:/Angular/lanes4/src/app/containers/edit-user.component.html (34,13): Property 'controls' does exist on type 'AbstractControl'.

Desired functionality.

I would like to build it using --prod and --aot

Mention any other details that might be useful.

Happened since updating to version 4.0.0, i've just been using ng build

[Thisen]

Can be fixed by giving your component a get method:
get formData { return this.form.get('Data'); }
and then in your template:
<div class="form-group" *ngFor="let field of formData.controls; let i = index">

[shammelburg]

@Thisen, It works with ng s but I am still getting the same error when building using either ng build --prod or ng build --prod --aot.

Property 'controls ' does not exist on type 'AbstractControl'.

Thank you

[shammelburg]

Got it!

Looked at the docs - FormArray

The FormArray class contains the controls property.

get formData() { return <FormArray>this.passwordForm.get('Data'); }

Thanks @Thisen, without you help it would've taken longer.

[zpydee]

I'm experiencing the same issue when trying to run ng build --prod with the snippet below although it seems my circumstance is a bit different. Not seeing this occur on any of my other forms?

Can either of your offer any guidance? I'm also running 4.0.0.

<form id="reset-password-form" novalidate [formGroup]="form" (ngSubmit)="submitForm()">
  <div fxLayout fxLayoutWrap>
    <!-- Current Password -->
    <div fxFlex="50%" fxFlex.xs="100%">
      <md-input-container id="currentPassword-container" class="full-width">
        <md-placeholder>Current Password</md-placeholder>
        <input id="currentPassword" mdInput required type="password" formControlName="currentPassword">
        <md-hint align="end" *ngIf="form.controls.currentPassword.dirty && form.controls.currentPassword.errors?.required">Current password is required</md-hint>
        <md-hint align="end" *ngIf="form.controls.currentPassword.dirty && form.controls.currentPassword.errors?.pattern">Must contain 8-16 characters, letters and numbers and symbols</md-hint>
      </md-input-container>
    </div>
    <div fxFlex="50%" fxFlex.xs="100%"></div>
    <div fxFlex="100%" fxLayout fxLayoutWrap formGroupName="passwords">
      <!-- New Password -->
      <div fxFlex="50%" fxFlex.xs="100%">
        <md-input-container id="password-container" class="full-width">
          <md-placeholder>New Password</md-placeholder>
          <input id="password" mdInput required type="password" formControlName="password">
          <md-hint align="end" *ngIf="form.controls.passwords.controls.password.dirty && form.controls.passwords.controls.password.errors?.required">New password is required</md-hint>
          <md-hint align="end" *ngIf="form.controls.passwords.controls.password.dirty && form.controls.passwords.controls.password.errors?.pattern">Must contain 8-16 characters, letters and numbers and symbols</md-hint>
        </md-input-container>
      </div>
      <div fxFlex="50%" fxFlex.xs="100%"></div>
      <!-- Confirm Password -->
      <div fxFlex="50%" fxFlex.xs="100%">
        <md-input-container id="confirmPassword-container" class="full-width">
          <md-placeholder>Confirm New Password</md-placeholder>
          <input id="confirmPassword" mdInput required type="password" formControlName="confirmPassword">
          <md-hint align="end" *ngIf="form.controls.passwords.controls.confirmPassword.dirty && form.controls.passwords.controls.confirmPassword.errors?.required">Password confirmation is required</md-hint>
          <md-hint align="end" *ngIf="form.controls.passwords.controls.confirmPassword.dirty && !form.controls.passwords.controls.confirmPassword.errors?.required &&form.controls.passwords.errors?.passwordMismatch">Passwords do not match</md-hint>
        </md-input-container>
      </div>
      <div fxFlex="50%" fxFlex.xs="100%"></div>
    </div>
  </div>
  <div fxLayout fxLayoutAlign="center">
    <!--Action buttons-->
    <button md-raised-button type="submit" [disabled]="!form.valid">RESET PASSWORD</button>
  </div>
</form>

ERROR in ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (22,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (22,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (22,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (23,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (23,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (23,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (32,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (32,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (32,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (33,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (33,11): Property 'controls' does not exist on type 'AbstractControl'.
ng:///usr/mystique/src/app/features/main/core-features/user-settings/reset-password/reset-password.component.html (33,11): Property 'controls' does not exist on type 'AbstractControl'.

[zpydee]

so, my issue was solved by changing the way controls were referenced in my <md-hint> blocks

changed to form['controls'].passwords['controls'].confirmPassword.dirty.

can anyone expand one why this is necessary with forms? is it because of the change detection cycle? I find it quite curious that the error was only ocurring on one of my form when the pattern I was using was consistent all forms...

[Yura13]

This problem still present.
If use form.get('Data').controls inside *ngFor and run ng build --prod, you will see error:
Property 'controls' does not exist on type 'AbstractControl'.

Angular CLI: 1.0.6
Angular: 4.1.3
node: 6.10.3

[dgroh]

I can confirm this.

when using --prod the HTML fails:

Property 'controls' does not exist on type 'AbstractControl'.

For now, I'm usin workaround of passing the logic to the ts, but it's not good because it's a public method.

version: Angular 4
@angular/cli: 1.2.1
node: 8.2.1
os: darwin x64

I can run the program on localhost: 4200. When ng build -- prod --aot, I get the following error:
Property 'controls' does not exist on type 'AbstractControl'.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from "@angular/router";
import { FormGroup, FormControl, FormArray, Validators } from "@angular/forms";
import { RecipeService } from "app/recipes/recipe.service";
import { Recipe } from "app/recipes/recipe.model";

@component({
selector: 'app-recipe-edit',
templateUrl: './recipe-edit.component.html',
styleUrls: ['./recipe-edit.component.css']
})
export class RecipeEditComponent implements OnInit {
id: number;
editMode = false;
recipeForm: FormGroup;

constructor(private route: ActivatedRoute,
private recipeService: RecipeService,
private router: Router) { }

ngOnInit() {
this.route.params.subscribe(
(params: Params) => {
this.id = +params['id'];
this.editMode = params['id'] != null;
this.initForm();
// console.log(this.editMode);
}
);
}
onSubmit() {
const newRecipe = new Recipe(
this.recipeForm.value['name'],
this.recipeForm.value['description'],
this.recipeForm.value ['imagePath'],
this.recipeForm.value ['ingredients']);

if (this.editMode) {
  this.recipeService.updateRecipe(this.id, newRecipe);
}
else {
  this.recipeService.addRecipe(newRecipe);
}

}

onClickX(index: number) {
(this.recipeForm.get('ingredients')).removeAt(index);
}

onClickCancel(){
this.router.navigate(['../'], {relativeTo: this.route})
}
onClickAddIngredient() {
(this.recipeForm.get('ingredients')).push(new FormGroup({
'name': new FormControl(null, Validators.required),
'amount': new FormControl(null,
// [Validators.required,
// Validators.pattern(/'^[1-9]+[0-9]*$'/)]
)
})
);
}
private initForm() {
let recipeName = '';
let recipeImagePath = '';
let recipeDescription = '';
let recipeIngredients = new FormArray([]);

if(this.editMode) {
const recipe = this.recipeService.getRecipe(this.id);
  recipeName = recipe.name;
  recipeImagePath = recipe.imagePath;
  recipeDescription = recipe.description;
  if(recipe['ingredients']) {
    for(let ingredient of recipe.ingredients) {
      recipeIngredients.push(
      new FormGroup({
        'name': new FormControl(ingredient.name, Validators.required),
        'amount': new FormControl(ingredient.amount, [
          Validators.required,
          // Validators.pattern(/'^[1-9]+[0-9]*$'/)
        ])
      })
    );
    }
  }
}
this.recipeForm =  new FormGroup({
  'name': new FormControl(recipeName, Validators.required),
  'imagePath': new FormControl(recipeImagePath, Validators.required),
  'description': new FormControl(recipeDescription, Validators.required),
  'ingredients': recipeIngredients
});

}
}

I am using 'get'. Can anyone help? Any suggestions?
Thank you.

La solucion mas facil es: formGroup.controls['any']['controls'].

Thank you!!

[uvconnects]

Having the same problem. ERROR in ng:///C:/Web/src/app/part-d-table/Modules/d8-tables/d8-tables.component.html (129,81): Property 'PercentVal' does not exist on type 'any[]'. ERROR in ng:///C:/Web/src/app/dashboard/dashboard.component.html (25,30): Property 'center' does not exist on type boardComponent'. ERROR in ng:Web/src/app/column-a-table/column-a-table.component.html (12,40): Property 'refresh' does not exist on type 'ColumnTableComponent'

[uvconnects]

But works when I use ng build

[souflam]

thnks @zpydee , this solution worked for me:
i used myForm['controls'].links['controls'] instead of myForm.controls.links.controls