Angular 17 Material mat-autocomplete mat-input within a FormGroup

Based on the following example on the Angular Material Site for v17 https://v17.material.angular.io/com...w#automatically-highlighting-the-first-option, I am trying to setup this but leveraging an Input FormControl within a FormGroup. However in doing so, I am finding that the FormControl valueChanges observable is not firing.

I did some testing to make sure the that if I use the FormControl within a FormGroup with wiring it up to the UI, I can see the Observable firing.

example markup that works

<mat-form-field class="contact-full-width">
<mat-label>country</mat-label>
<input
placeholder="Pick one"
aria-label="Number"
matInput
formControlName="country"
required>

</mat-form-field>


example component code that works

public registerForm = new FormGroup({
email: new FormControl(''),
firstName: new FormControl(''),
lastName: new FormControl(''),
addressLine1: new FormControl(''),
addressLine2: new FormControl(''),
stateProvinceTerritory: new FormControl(''),
cityTownSuburb: new FormControl(''),
country: new FormControl(''),
postalCode: new FormControl(''),
});

private _filteredCountries: Array<Country> = [];

public get filteredCountries () {
return this._filteredCountries;
}


this._subCountryInputChange = this.registerForm.get('country')?.valueChanges.pipe(
startWith(''),
filter((value) => (!value ? 0 : value.length) > 2),
debounceTime(500),
map((data: any) => {
const name = typeof data === 'string' ? data : data?.name;
return data ? this.filterList<Country>(data, this._masterCountries) : this._masterCountries.slice();
})
).subscribe({
nextdata: Array<Country>) => { this._filteredCountries = data; },
errore: any) => { console.log(e) },
complete) => { console.log('ok') }
})


If I place a break point on the line with next I can see the assignment to this._filteredCountries occurring.

However, if I change the markup to wireup the filteredCountries to the auto-complete, nothing happens.

example markup

<mat-form-field class="contact-full-width">
<mat-label>country</mat-label>
<input
placeholder="Pick one"
aria-label="Number"
matInput
formControlName="country"
[matAutocomplete]="auto"
required>
<mat-autocomplete name="country" #auto="matAutocomplete" [displayWith]="displayFn" requireSelection>
<!-- @for (option of filteredOptions | async; track option) {-->
@for (option of filteredCountries; track option) {
<mat-option [value]="option">{{option.name}}</mat-option>
}
</mat-autocomplete>
</mat-form-field>


I have also tried the observable / async approach wiring the observable directly to the control in markup but that does not work either.

I am not sure what I am missing but any assistance would be appreciated

Continue reading...