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
}
