Angular Reactive Forms: FormArray of mat-select

Question

I need to create a Form with a FormArray of mat-select controls (CoordinatorX) as displayed in below Pic:

The code that produce the above Form is as follows:

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

Upto this point, it works well. I am able to select the options from any of the 3 mat-select controls.

But I try adding another coordinator dynamically by the following code:

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

It adds a new control as expected. But when I click on it, it is not showing the options. Any further dynamically added mat-select controls are not working right.

Any help please?

PS: I am using Angular material controls

That's a Getter, defined as get coordinators(): FormArray { return this.eventForm.get('coordinators') as FormArray; }; — saiy2k

chinaski chinaski · Accepted Answer · 2018-07-15T07:04:19

i think maybe you need make your arrayFormControl be reactive

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

Angular Reactive Forms: FormArray of mat-select

1 Answers