Angular Material Select - default value selected from array

Question

I have following angular material select HTML:

<mat-select formControlName='personPersonDocumentTypes'>
<mat-option *ngFor="let dokumeti of MOQALAQEdokumentisTipebi" [value]="dokumeti">
{{dokumeti}}
</mat-option>
</mat-select>

MOQALAQEdokumentisTipebi is an array that is getting updated from a network API request. I just want to select by default the first element of 'MOQALAQEdokumentisTipebi' array.

I have tried doing something like this:

<mat-select [(ngModel)]="MOQALAQEdokumentisTipebi[0]" formControlName='personPersonDocumentTypes'>
<mat-option *ngFor="let dokumeti of MOQALAQEdokumentisTipebi" [value]="dokumeti">
{{dokumeti}}
</mat-option>
</mat-select>

But in this case, I would get the whole array instead of the first element.

I have tried adding default variable in my TS file:

public defValue = MOQALAQEdokumentisTipebi[0];

But in this case, I was getting blank selection, as if there was nothing assigned to it. I also console logged my defValue variable and it showed data, but it didn't work in default selection.

My question is how to set default selection first element of the array in the code like this(with ngFor):

<mat-select formControlName='personPersonDocumentTypes'>
<mat-option *ngFor="let dokumeti of MOQALAQEdokumentisTipebi" [value]="dokumeti">
{{dokumeti}}
</mat-option>
</mat-select>

// adding array of doc types


this.moqalaqeSearchData.personPersonDocumentTypes.map((array) => {
this.MOQALAQEdokumentisTipebi.push(array.personDocumentType.nameGeorgian);
});

Probably it is something with using array as an option and for a cycle. How to make work default value, in this case, is the question — nevaehteekay
– nevaehteekay, Commented Mar 19, 2021 at 10:24
Don't use ngModel and formControlName together. Use form only. When you get response do this.form.get('personPersonDocumentTypes').patchValue(MOQALAQEdokumentisTipebi[0]). — Bojan Kogoj
– Bojan Kogoj, Commented Mar 19, 2021 at 10:28
But how to set default select value? How to assign it in here - <mat-select formControlName='personPersonDocumentTypes'> — nevaehteekay
– nevaehteekay, Commented Mar 19, 2021 at 10:33

Emilien · Accepted Answer · 2021-03-19 10:50:09Z

1

As @Bojan said, you need to set the form value when you receive datas :

form: FormGroup;

constructor() {
  this.form = new FormGroup({
    personPersonDocumentTypes: [''],
    // ...
  });

  this.moqalaqeSearchData.personPersonDocumentTypes.map((array) => {
    this.MOQALAQEdokumentisTipebi.push(array.personDocumentType.nameGeorgian);
  });

  this.form.get('personPersonDocumentTypes').patchValue(this.MOQALAQEdokumentisTipebi[0])
}

answered Mar 19, 2021 at 10:50

Emilien

2,7534 gold badges17 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Angular Material Select - default value selected from array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related