Quiero crear un control de formulario de autocompletado de material angular con dos formas de filtrar las opciones seleccionables:

1. La forma predeterminada, cuando el usuario escribe la entrada de texto, y solo las opciones que coinciden con el término de búsqueda serán visibles, como en los ejemplos en el sitio web de Angular Material.
2. Encima del componente de autocompletar hay un control de formulario de selección de categoría. Cuando se elige una categoría, quiero mostrar solo los elementos en la categoría elegida y permitir que el usuario busque solo en estos elementos con la entrada de texto de autocompletar.

Aquí está mi código en la clase de componente:

 category = new FormControl(''); product = new FormControl(''); inwardForm = new FormGroup({ category: this.category, product: this.product, }); ngOnInit(): void { combineLatest([ this.inwardForm.get('product')!.valueChanges, this.inwardForm.get('category')!.valueChanges, ]).pipe( startWith(['', undefined]) ).subscribe(result=>{ console.log(result); }); }

Mi problema es que, después de inicializar el componente, cuando empiezo a escribir el componente de autocompletar, no sucede nada. Después de elegir una categoría en el componente de selección de categoría, se activa el archivo console.log. Después de elegir una categoría, y luego escribir para autocompletar, console.log se dispara nuevamente con cada pulsación de tecla.

Entonces, después de elegir una categoría, funciona como se esperaba, pero no quiero que la selección de categoría sea obligatoria. ¿Cual podría ser el problema?