Angular Material Autocomplete value is always empty and onSelection is never fired - html

Question

So, I have a component only for the autocomplete by angular material and a parent component which has a form and uses this autocomplete once.
When I click on a value to choose from the autocomplete, it doesn't get saved anywhere and is empty. Also, I would expect the onSelection event to fire, but it doesnt. I tried several ways to get the current value from the form field, but whatever way I try, its always empty.
Here is the ts file for the autocomplete:
interface GroupOption {
group: string;
items: OptGroupItem[];
}
#Component({
selector: 'sh-ui-forms-mat-autocomplete-optgroup-control;',
templateUrl: './mat-autocomplete-optgroup-control.component.html',
styleUrls: ['./mat-autocomplete-optgroup-control.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MatAutocompleteOptgroupControlComponent),
multi: true,
},
],
})
export class MatAutocompleteOptgroupControlComponent
implements OnInit, OnChanges, ControlValueAccessor
{
#Input()
label = '';
/** Liste der Roh-Optionen */
#Input()
groupOptions: OptGroupItem[] = [];
/** Observable für die GUI */
options$?: Observable<GroupOption[]>;
/** interne Liste der Optionen zum Filtern, Prüfen etc. von Items */
private options: GroupOption[] = [];
private emptyOption: OptGroupItem = {
group: '',
name: '',
id: '',
};
control = new FormControl('');
ngOnInit(): void {
this.options$ = this.control.valueChanges.pipe(
startWith(''),
map(value => this.createGroupOptions(value))
);
}
ngOnChanges(c: SimpleChanges): void {
this.options = this.groupByGroup(this.groupOptions);
}
/** Hilfsfunktion zum Umwandeln der Rohoptionen */
private groupByGroup(options: OptGroupItem[]): GroupOption[] {
const groups = groupBy(options, 'group');
return Object.entries(groups).map(([group, items]) => ({
group,
items,
}));
}
/** Filtern und erstellen der Optionen für die GUI */
private createGroupOptions(filter: any): GroupOption[] {
let options = this.groupOptions;
if (filter != null) {
const searchValue = (filter.name || filter).toString().toLowerCase();
options = this.groupOptions.filter(option =>
option.name.toString().toLowerCase().includes(searchValue)
);
}
const groups = this.groupByGroup(options);
return groups;
}
/** Liefert ein Roh-Item aus der Liste der Optionen. */
private getOptionFromId(options: GroupOption[], id: string): OptGroupItem {
let retVal = this.emptyOption;
options.forEach(o => {
const item = o.items.find(i => i.id === id);
if (item != null) {
retVal = item;
}
});
return retVal;
}
onChange = (_: string) => {};
onTouched = () => {};
registerOnChange(fn: (_: string) => void): void {
this.onChange = fn;
}
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}
// Behandelt eine Control-Wertänderung von "außen".
writeValue(value: string) {
let currentValue = this.getOptionFromId(this.options, value);
if (currentValue === null) {
currentValue = this.emptyOption;
}
this.control.setValue(currentValue);
}
//Auswahl im autocomplete
onDropdownChange(e: MatAutocompleteSelectedEvent) {
const selectedValue = e.option.value.id;
console.log('onDropdownchange! => selectedValue:');
console.log(selectedValue);
this.onChange(selectedValue);
}
displayName(option: any): string {
return option ? option.name : '';
}
/** Auswahl im Input-Feld */
onValueChange(event: any): void {
event?.preventDefault();
const value = this.control.value;
if (!value) {
this.control.setValue(this.emptyOption);
this.onChange(this.emptyOption.id);
}
}
}
Thats the html file for the autocomplete:
<mat-form-field appearance="outline">
<mat-label>{{ label }}</mat-label>
<ng-container>
<input
type="text"
matInput
[formControl]="control"
[matAutocomplete]="auto"
(blur)="onValueChange($event)"
(keyup.enter)="onValueChange($event)"
/>
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)="OnDropdownChange($event)"
[displayWith]="displayName"
>
<mat-optgroup
*ngFor="let option of options$ | async"
[label]="option.group"
>
<mat-option *ngFor="let item of option.items" [value]="item">
{{ item.name }}
</mat-option>
</mat-optgroup>
</mat-autocomplete>
</ng-container>
</mat-form-field>
And thats how I call the component from the parent form component:
<sh-ui-forms-mat-autocomplete-optgroup-control
[label]="'Einsatz'"
[groupOptions]="openEinsatzListe$ | async"
formControlName="einsatzId"
></sh-ui-forms-mat-autocomplete-optgroup-control>
openEinsatzListe$ is an observable.
In the picture you can see how the data from the observable/the optionGroups/options for the autocomplete looks like
Question: Why is no value saved when I select a value?
(Btw, there is another bug if you are interested. If you click in the form field, no values are shown. You have to type a space and remove it again to see the values. Maybe you know the solution for that aswell?)

Answer 1

Your form control implementation is wrong, Please check this manual: https://blog.angular-university.io/angular-custom-form-controls/
Basic implementation check here: https://stackblitz.com/edit/angular-ivy-cdvhyz?file=src/app/app.component.ts