Error Property 'controls' does not exist on type 'AbstractControl'. while compiling for production - angular5

Question

Hi I am getting an error while compiling my project . I am using angular 5 and typescript.
i am giving an npm run build and from project root folder and the following is the error i recieve.
bash-4.2$ npm run build
> primecast#5.0.1 build /tmp/tester001/mep-private/ui
> ng build --prod
10% building modules 3/4 modules 1 active ...ter001/mep-private/ui/src/styles.scssNode#moveTo was deprecated. Use Container#append.
Date: 2019-12-20T11:17:00.575Z
Hash: 175df3f370fd7976d3c4
Time: 16261ms
chunk {0} styles.bb4ae0c2b0dd75fdc7ee.bundle.css (styles) 159 kB [initial] [rendered]
chunk {1} polyfills.3bc34265385d52184eab.bundle.js (polyfills) 86 bytes [initial] [rendered]
chunk {2} main.e402deade8b026b7d50e.bundle.js (main) 84 bytes [initial] [rendered]
chunk {3} inline.9d07561b59257af76b95.bundle.js (inline) 1.45 kB [entry] [rendered]
ERROR in src/app/accounts/account-service-provider-clients/account-service-provider-clients.component.html(17,28): : Property 'controls' does not exist on type 'AbstractControl'.
the following is content of the account-service-provider-clients.component.html
<form novalidate [formGroup]="formGroup">
<div formArrayName="aliases">
<div [formGroupName]="i" *ngFor="let item of formGroup.get('aliases').controls; let i = index">
<div class="row">
<div class="col-2">
<input type="hidden" formControlName="id" >
<pc-form-field [errorMessages]="['required','maxlength']">
<input type="text" formControlName="name" [placeholder]="'PLACEHOLDERS.SERVICE_PROVIDER_CLIENT_NAME' | translate" name="client-name">
</pc-form-field>
</div>
<div class="col-2">
<pc-form-field [errorMessages]="['maxlength']">
<input type="text" formControlName="companyNumber" [placeholder]="'PLACEHOLDERS.SERVICE_PROVIDER_CLIENT_COMPANY_NUMBER' | translate" name="company-number">
</pc-form-field>
</div>
<div class="col-2">
<pc-button class="remove-btn" theme="default" icon="trash" kind="flat" (click)="removeItem(i)">
{{ 'ACTIONS.REMOVE' | translate }}
</pc-button>
</div>
<div class="col-*">
</div>
</div>
</div>
<div>
<pc-button theme="success" icon="check" type="submit" [disabled]="formGroup.invalid" (click)="handleSubmit()">
{{'ACTIONS.SUBMIT' | translate}}
</pc-button>
<pc-button theme="default" icon="times" kind="flat" [link]="cancelLink">
{{'ACTIONS.CANCEL' | translate}}
</pc-button>
</div>
</div>
</form>
The following is my account-service-provider-clients.component.html
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '#angular/forms';
import { duplicateClientNameValidator, AuthenticationService, ToastService } from '../../shared';
import { ServiceProviderClient, Account} from '../../shared/models'
import { ServiceProviderClientBulkUpdateRequest } from '../../shared/models/requests'
import { ServiceProviderClientService } from '../../shared/services';
import { take, tap, switchMap } from 'rxjs/operators';
import { TranslateService } from '#ngx-translate/core';
#Component({
selector: 'pc-account-service-provider-clients',
templateUrl: './account-service-provider-clients.component.html',
styleUrls: ['./account-service-provider-clients.component.scss']
})
export class AccountServiceProviderClientsComponent implements OnInit {
formGroup: FormGroup;
isLoading = false;
account: Account;
constructor( private fb: FormBuilder, private serviceProviderClientService: ServiceProviderClientService, private authenticationService: AuthenticationService
, private translate: TranslateService, private toastService: ToastService) {}
ngOnInit() {
this.isLoading = true;
this.formGroup = this.fb.group({
aliases: this.fb.array([])
},{validator: [duplicateClientNameValidator('aliases')]});
this.authenticationService.currentUser$.pipe(
take(1),
tap( user => { this.account = user.account } ),
switchMap( () => this.serviceProviderClientService.getAccountServiceProviderClients())
).subscribe(
serviceProviderClients => {
this.populateForm(serviceProviderClients);
this.isLoading = false;
}
);
}
populateForm(serviceProviderClients: ServiceProviderClient[] ) {
while (this.aliases.length !== 0) {
this.aliases.removeAt(0);
}
for ( const serviceProviderClient of serviceProviderClients) {
const formGroupNew: FormGroup = new FormGroup( {
id: new FormControl( { value:serviceProviderClient.id, disabled:false}),
name: new FormControl({ value:serviceProviderClient.name, disabled:false},[Validators.required, Validators.maxLength(50)]),
companyNumber: new FormControl({ value:serviceProviderClient.companyNumber, disabled:false},Validators.maxLength(20))
}
);
this.aliases.push(formGroupNew);
}
}
get aliases() {
return this.formGroup.get('aliases') as FormArray;
}
addAlias() {
const formGroupNew: FormGroup = new FormGroup( {
id: new FormControl( { value:'', disabled:false}),
name: new FormControl({ value:'', disabled:false},[Validators.required, Validators.maxLength(50)]),
companyNumber: new FormControl({ value:'', disabled:false},Validators.maxLength(20))
}
);
this.aliases.push(formGroupNew);
}
removeItem( index :number){
this.aliases.removeAt(index);
}
handleSubmit() {
const formArrayLength = this.aliases.length;
const serviceProviderClientsArray: ServiceProviderClient[] = [];
let serviceProviderClientUpdateRequest : ServiceProviderClientBulkUpdateRequest;
for(let i = 0;i<formArrayLength;i++)
{
const itemFrmGroup:FormGroup = <FormGroup>this.aliases.at(i);
const serviceProviderClient: ServiceProviderClient = {
id: itemFrmGroup.get("id").value,
name: itemFrmGroup.get("name").value,
companyNumber: itemFrmGroup.get("companyNumber").value
}
serviceProviderClientsArray.push(serviceProviderClient);
}
serviceProviderClientUpdateRequest = {
clients : serviceProviderClientsArray
}
this.isLoading = true;
this.serviceProviderClientService.bulkUpdate(serviceProviderClientUpdateRequest).subscribe(
(result) => {
this.isLoading = false;
this.populateForm(result);
this.translate
.get([
'VALIDATION.SUCCESS.SERVICE_PROVIDER_CLIENT_SETTINGS.TITLE',
'VALIDATION.SUCCESS.SERVICE_PROVIDER_CLIENT_SETTINGS.BODY'
])
.subscribe(translate => {
this.toastService.toast({
title: translate['VALIDATION.SUCCESS.SERVICE_PROVIDER_CLIENT_SETTINGS.TITLE'],
body: translate['VALIDATION.SUCCESS.SERVICE_PROVIDER_CLIENT_SETTINGS.BODY'],
type: 'success',
icon: 'check-circle'
});
});
},
()=> {
this.isLoading = false;
}
);
}
get cancelLink(): string {
return '/dashboard';
}
}
I think the usage of form array is causing this problem.
many websites suggest the usage of get method for accessing the form array and i am doing it but no success
get aliases() {
return this.formGroup.get('aliases') as FormArray;
}
really appreciate any help
thank you so much
Prasanth

Answer 1

I have fixed the issue as follows
1) created a new method as below in my ts file
get aliasesArrayControl() {
return (this.formGroup.get('aliases') as FormArray).controls;
}
and then accessing it as follows in my control.
<div formArrayName="aliases" *ngFor="let item of aliasesArrayControl; let i = index">
</div>
thanks