How to use mat-select with reactive forms formarray angular

Question

So far, I've written below code

<form [formGroup]="testForm">
    <div formArrayName="selects">
        <mat-form-field *ngFor="let select of selects.controls; let i = index">
            <mat-select [formControlName]="i">
                <mat-option *ngFor="let option of select.value.options" [value]="option">{{ option }}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</form>

In the component file

testForm: FormGroup;

get selects() {
  return this.testForm.get('selects') as FormArray;
}

data = [{
  initial: 'one',
  options: ['two', 'three', 'four']
}, {
  initial: 'a',
  options: ['b', 'c', 'd']
}];

constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
  this.testForm = this.formBuilder.group({
    selects: this.formBuilder.array([]),
  });

  for (let i = 0; i < this.data.length; i++) {
    this.selects.push(new FormControl(this.data[i]));
  }
}

But this is not working so far. What I am doing wrong here?

Find the Stackblitz here.

Issue: As you can see in the stackblitz, it is not showing the initial value and if we select the option, then also it is not working and also options are disappearing from the select if we select any option.

Hi @yurzui as you can see in the stackblitz, it is not showing the initial value and if we select the option, then also it is not working and also options are disappearing — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Aug 25, 2019 at 13:48

yurzui · Accepted Answer · 2019-08-25 13:56:15Z

2

Your example looks strange:

{
  initial: 'one', <------------  it is not in options array
  options: ['two', 'three', 'four']
}

But anyway if you want to make it work with FormArray then you should be mapping initial value and not the whole object:

this.testForm = this.formBuilder.group({
  selects: this.formBuilder.array(this.data.map(item => new FormControl(item.initial))),
});

And your html should look like:

<mat-form-field *ngFor="let select of data; let i = index">
    <mat-select [formControlName]="i">
        <mat-option *ngFor="let option of select.options" [value]="option">{{ option }}</mat-option>
    </mat-select>
</mat-form-field>

As you can see I loop over original data array.

Forked Stackblitz

answered Aug 25, 2019 at 13:56

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sivakumar Tadisetti Over a year ago

Yeah, that's true, I missed it :-). I am trying your solution in my original code. I have one doubt, instead of using data to loop, can't we use selects.controls

yurzui Over a year ago

We can use selects.controls but we need to get options somehow. We don't keep options in FormArray. Now it's only array of FormControl's. I use loop over data because I have select.options access

Collectives™ on Stack Overflow

How to use mat-select with reactive forms formarray angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related