Угловой 6: Не удается прочитать свойства «элементы управления» неопределенных - реактивных форм

Question

Я создаю простую панель мониторинга в Angular 6. Я использую конструктор форм для создания моей формы, которая выглядит следующим образом:

  campaignForm = this.formBuilder.group({
    name: ['', Validators.required],
    countries: this.formBuilder.array([
      this.formBuilder.control('')
    ]),
    apps: this.formBuilder.array([
      this.formBuilder.control('')
    ])
  });

Я бы хотел сохранить эту форму и сохранить ее с помощьюAPI для базы данных.Однако я продолжаю получать «Не удается прочитать свойство» элементы управления «неопределенного», который указывает на строку в HTML.Я следовал руководству в угловой документации о том, как строить реактивные формы.

Вот соответствующий код TS:

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>

Кажется, ошибка указывает на эту строку:

<div *ngFor="let country of countries.controls; let i=index">

У кого-нибудь есть идеи, почему это происходит?Кажется, что Angular не может получить доступ к собственности стран, но я просто не знаю, как обойти это.Любая помощь будет оценена.