问角度反应形式: mat-select的FormArray

EN

<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>

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           :   ''
    })]),
});

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