Angular 6: Cannot read property 'controls' of undefined - reactive forms - html

Question

I am building a simple dashboard in Angular 6. I am using form builder to create my form that looks like this:
campaignForm = this.formBuilder.group({
name: ['', Validators.required],
countries: this.formBuilder.array([
this.formBuilder.control('')
]),
apps: this.formBuilder.array([
this.formBuilder.control('')
])
});
I would like to be able to save that form and save it via api to the database. However I keep getting 'Cannot read property 'controls' of undefined' that is pointing to the line in html. I've been following a guide in angular documentation on how to build reactive forms.
Here's the relevant TS code:
campaign.model.ts
export class Campaign {
id: string;
name: string;
countries?: any;
apps?: any;
}
add-campaign.component.ts
campaign: Campaign;
campaignForm = this.formBuilder.group({
name: ['', Validators.required],
countries: this.formBuilder.array([
this.formBuilder.control('')
]),
apps: this.formBuilder.array([
this.formBuilder.control('')
])
});
constructor(public campaignsService: CampaignsService, public route: ActivatedRoute, private formBuilder: FormBuilder) { }
ngOnInit() {
this.route.paramMap.subscribe((paramMap: ParamMap) => {
if (paramMap.has('campaignId')) {
this.mode = 'edit-campaign';
this.campaignId = paramMap.get('campaignId');
this.campaignsService.getCampaign(this.campaignId)
.subscribe(campaignData => {
this.campaign = {
id: campaignData._id,
name: campaignData.name,
countries: campaignData.countries,
apps: campaignData.apps
};
this.campaignForm.setValue({
'name': this.campaign.name,
'countries': this.campaign.countries
});
});
} else {
this.mode = 'add-campaign';
this.campaignId = null;
}
});
get country() {
return this.campaignForm.get('countries') as FormArray;
}
get app() {
return this.campaignForm.get('apps') as FormArray;
}
addCountry() {
this.campaign.countries.push(this.formBuilder.control(''));
}
addApp() {
this.campaign.apps.push(this.formBuilder.control(''));
}
add-campaign.component.html
<form [formGroup]="campaignForm" (ngSubmit)="onSaveCampaign($event)">
<label>Name</label>
<div>
<input type="text" formControlName="name" placeholder="name" required>
</div>
<div formArrayName="countries">
<h3>Country</h3>
<button type="button" (click)="addCountry()">Add Country</button>
<div *ngFor="let country of countries.controls; let i=index">
<label>
Country:
</label>
<input type="text" [formControlName]="i">
</div>
</div>
<div formArrayName="apps">
<h3>App</h3>
<button type="button" (click)="addApp()">Add App</button>
<div *ngFor="let app of apps?.controls; let i=index">
<label>
App
</label>
<input type="text" [formControlName]="i">
</div>
</div>
<button mat-raised-button color="primary" type="submit" [disabled]="!campaignForm.valid">Save campaign</button>
<button mat-raised-button color="primary" type="button" class="button-margin-left" routerLink="/">Go back</button>
</form>
the error seems to be pointing to this line:
<div *ngFor="let country of countries.controls; let i=index">
Does anyone have any idea why is this happening? It seems like Angular cannot access countries property, but I just do not know how to get around this. Any help would be appreciated.