Angular Reactive Forms：mat-select 的 FormArray

Question

我需要创建一个 FormArray 的 mat-select 控件 (CoordinatorX)，如下图所示：

产生上述表格的代码如下：

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 材质控件

Answer 1

我想也许你需要让你的 arrayFormControl 具有响应性

<span [formArrayName]="coordinators"...>