CODEWITHSUNDEEP
angulartypescript2.0
Arun
Arun

Reputation: 886

Angular 2 build --prod fails "Property 'controls' does not exist on type 'AbstractControl'"

In below code this.fb is FormBuilder instance 

return this.fb.group({
  name: ['', [<any>Validators.required]],
  phone: ['', [<any>Validators.required]],
  email: ['', [<any>Validators.required, Validators.email]],
  website: ['', [<any>Validators.pattern(web_pattern)]]
  tax_code: ['', [<any>Validators.required,Validators.maxLength(50)]],

  owner: this.fb.group({
    first_name: ['', [<any>Validators.required, Validators.maxLength(30)]],
    last_name: ['', [<any>Validators.required, Validators.maxLength(30)]],
    phone: ['', [<any>Validators.required]],
    email: ['', [<any>Validators.required, Validators.email]],
    password: ['', [<any>Validators.required]],
  })

});

On building this code using ng build --prod, it fails stating : Property 'controls' does not exist on type 'AbstractControl'. It is having problem with owner key, which is a FormGroup instance, instead of FormControl. However according to angular docs its valid to add a FormGroup within a FormGroup.

This code builds perfectly without --prod. I understand that --prod leads to strict typechecking. I am not able to understand how to correct this.

Upvotes: 0

Views: 1924

Answers (1)

Rahul Singh
Rahul Singh

Reputation: 19640

Some where in your Form Control you must be using some thing like this 

form.get('qualifications').controls

or form.controls.qualifications.controls.degree or form.controls.qualifications['controls'].degree and this is not aot friendly.

You need to put this inside the component instead of the template Something like this.

Template

 <div class="col-md-12" *ngFor = "let address of getAddresses(user) ; let i = index">

Component

  getAddresses(form){
    return form.get('addresses').controls;
  }

A working aot example of the same and code

Upvotes: 3

Related Questions