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

Question

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.

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.

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 {

  functiongGroup: FunksjonsGruppe;
  ressurs: Ressurser;

  @Input() prosjektFunksjon: ProsjektFunksjon;
  @Input() ressurser: Ressurser[];
  @Input() prosjFunk: ProsjektFunksjon[];

  // selectedFunksjon: any;
  selectedRessurs: number;
  selectedRessursId: number;
  ressursId: number;
  prosjektId: number;
  selectedRowId: any;
  funksjonsgruppe: any;
  fetchedProsjektFunksjon: ProsjektFunksjon;

  constructor(public dialogRef: MatDialogRef<PatchDialogComponent>,
              private projectService: ProjectService,
              @Inject(MAT_DIALOG_DATA) public data: any
              ) {
              }

  formControl = new FormControl('', [
    // Validators.required
    // Validators.email,
  ]);
  ressursControl = new FormControl();
  // options: Ressurser[];
  filteredOptions: Observable<Ressurser[]>;

  patchForm = new FormGroup({
    selectedRessurs: new FormControl(),
    rollenavn: new FormControl(),
    estimertAntallTimer: new FormControl()
  });

  getErrorMessage() {
    return this.formControl.hasError('required') ? 'Required field' :
      this.formControl.hasError('email') ? 'Not a valid email' :
        '';
  }

  submit() {
    // empty stuff
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

  public confirmPut(): void {
    console.log(' 99: ', this.data);
    this.prosjektFunksjon = {
        prosjektFunksjonId: this.fetchedProsjektFunksjon.prosjektFunksjonId,
        estimertAntallTimer: this.patchForm.value['estimertAntallTimer'],
        rollenavn: this.patchForm.value['rollenavn'],
        funksjonId: null,
        funksjonNavn: null,
        subGruppe: null,
        subGruppeId: null,
        gruppe: null,
        gruppeId: null,
        ressursId: this.patchForm.value.selectedRessurs['ressursId'],
        ressursNavn: null
    };
    console.log('data 101: ', this.data, '\n', ' ProsjektFunksjonsID: ', this.fetchedProsjektFunksjon.prosjektFunksjonId, '\n', ' prosjektFunksjon: ',  this.prosjektFunksjon, );
    this.projectService.updateProjectFunction(this.prosjektId, this.selectedRowId, this.prosjektFunksjon).subscribe();
  }

  displayFn(user?: Ressurser): string | 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 {
    this.data = this.dialogRef.componentInstance;
        this.projectService.getResources().subscribe(r => {
          this.ressurser = r;
          this.ressurser = (this.ressurser || []).sort((a: Ressurser, b: Ressurser) => a.navn.localeCompare(b.navn));
        });

    this.projectService.getProjectFunction(this.prosjektId, this.selectedRowId).subscribe(gpf => {
      // console.log('gpf:  ', gpf);
      this.fetchedProsjektFunksjon = gpf;
      console.log('onit: ', this.fetchedProsjektFunksjon);

      // patchFrom expects an object matching to the formgroup, field by field.
      this.patchForm.patchValue({
        selectedRessurs: this.fetchedProsjektFunksjon['ressursNavn'],
        rollenavn: this.fetchedProsjektFunksjon['rollenavn'],
        estimertAntallTimer: this.fetchedProsjektFunksjon['estimertAntallTimer']
       });
       console.log('After patchValue. fetchedProsjFunk: ', this.fetchedProsjektFunksjon);
    });

    this.filteredOptions = this.ressursControl.valueChanges
      .pipe(
        startWith<string | Ressurser>(''),
        map(value => typeof value === 'string' ? value : value.navn),
        map(navn => navn ? this._filter(navn) : null)
      );

    } // @oninit

}

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!