Angular material: get the id of the chosen value in a dropdown

I have a material dialog that opens from an edit button on a table of data.

I am getting undefined on "ressursId" that should get it's value from the patchValue method but that always is undefined too.

There seems to be an issue with calling pathcValue() and using [displayWith]="displayFn" at the same time, as the displayWith overwrites the patchValue? I'm not sure.

pathcValue()

[displayWith]="displayFn"

So what is not working here is that when I type in the input even though I get filtered results in the dropdown, I should be displaying the initial value from the table (if one exists, it doesn't always exist when the dialog is opened).

I also more importantly need to get the ressursId of the chosen value because without it, I cannot make the PUT request to update the data.

ressursId

What am I doing wrong? The Angular docs are too simplistic!

Partial form component.html

<form class="mat-dialog-content" (ngSubmit)="submit()" #formControl="ngForm" [formGroup]="patchForm">

<div class="form">
<mat-form-field>
<input
matInput
formControlName="selectedRessurs"
[matAutocomplete]="auto"
placeholder="Ressurs"
[formControl]="ressursControl"
>
<mat-autocomplete #auto="matAutocomplete" name="selectedRessurs" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
option.navn
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>


and my component.ts

export class PatchDialogComponent implements OnInit undefined
return user ? user.navn : '';


private _filter(navn: string): Ressurser
const filterValue = navn.toLowerCase();
return this.ressurser.filter(option => option.navn.toLowerCase().indexOf(filterValue) === 0);
// return this.ressurser.filter(option => option.ressursId.indexOf(filterValue) === 0);


ngOnInit(): void Ressurser>(''),
map(value => typeof value === 'string' ? value : value.navn),
map(navn => navn ? this._filter(navn) : null)
);

// @oninit




1 Answer
1

Sorry, I don't have enough reputation to add a comment yet, but I noticed that you have both a [formGroup]="patchForm" with the formControlName="selectedRessurs" set on your input element, along with a binding to a [FormControl]="ressursControl". I would assume that only one of them is valid, most likely the ressursControl. At least it's something to check.

I also found these SO answers to be helpful in understanding FormGroups and FormControls -> What is the difference between formControlName and FormControl?

Hope this helps!

option

fooId

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.