angular - Angular Reactive Forms: mat-select の FormArray

Question

下の図に示すように、マット選択コントロール (CoordinatorX) の FormArray を使用してフォームを作成する必要があります。

上記のフォームを生成するコードは次のとおりです。

component.html:

<span formArrayName="coordinators" class="col-12" *ngIf="coordinators.controls.length > 0">
    <span class="row" *ngFor="let coord of coordinators.controls; let i = index" [formGroupName]="i">

        <mat-form-field class="col-10 col-md-11 col-lg-10">
            <mat-select formControlName="name" placeholder="Coordinator {{i}}">
                <mat-option [value]="admin.name" *ngFor="let admin of (cNgo$ | async)?.admin"> {{ admin.phone}} - {{ admin.name }} </mat-o
            </mat-select>
        </mat-form-field>

        <div class="col-2 col-md-1 col-lg-2">
            <button type="button" (click)="removeCoordinator(i)" mat-icon-button *ngIf="i > 0">
                <mat-icon aria-label="Delete">delete</mat-icon>
            </button>
        </div>

    </span>
</span>

component.ts:

return this.fb.group({
    name                :   ['', [
        Validators.required,
        Validators.minLength(v.name.minLength),
        Validators.maxLength(v.name.maxLength)
    ]],

    shortCode           :   ['', [
        Validators.required,
        Validators.minLength(v.shortCode.minLength),
        Validators.maxLength(v.shortCode.maxLength)
    ], [
        EventValidator.shortCodeValidator(that.http)
    ]],

    coordinators        :   this.fb.array([this.fb.group({
        id              :   '',
        name            :   '',
        phone           :   '',
        email           :   ''
    }), this.fb.group({
        id              :   '',
        name            :   '',
        phone           :   '',
        email           :   ''
    }), this.fb.group({
        id              :   '',
        name            :   '',
        phone           :   '',
        email           :   ''
    })]),
});

この時点まで、それはうまく機能します。3 つのコントロールのいずれかからオプションを選択できますmat-select。

しかし、次のコードで別のコーディネーターを動的に追加してみます。

addCoordinator() {
    this.coordinators.push(this.fb.group({
        id                  :   '',
        name                :   '',
        phone               :   '',
        email               :   ''
    }));
    console.log(this.eventForm);
}

期待どおりに新しいコントロールを追加します。しかし、それをクリックすると、オプションが表示されません。さらに動的に追加されたmat-selectコントロールが正しく機能しません。

何か助けてください。

PS: Angular マテリアル コントロールを使用しています