Angular mat-autocomplete not filtering values when i use formcontrolname instead [formcontrol]

Question

I have implemented mat-autocomplete in my code (as implemented in the link) and it works perfectly well without any issues.

But I need to change [formcontrol] to formcontrolname so that input box will be binded with values populated from DB and saved back to DB while saving.

When i use formcontrolname, everything works well, except the search/filtering values. Could some one help me in fixing the search/filter issues while using formcontrolname.

Please post the relevant code part also into your question. Links break over time or not everyone has access to these links. — Alessandro Giusa, Jul 16 '20 at 04:48
In order to improve your question try to consider at least following advices. Post the relevant code part also into your question. Try to introduce to your problem before posting any code or links to code. It is not useful to ask for help, since you already posting a question, which implies that you need help on this topic. I find it difficult to understand the problem. Try to picture the problem in a way that it is easy to understand. — Alessandro Giusa, Jul 16 '20 at 04:57

score 0 · Answer 1 · answered Jul 16 '20 at 06:07

I suppose your problem is that you're trying to subscribe to valueChanges before create the form, you need make it after. e.g.

ngOnInit() {
    //create the form
    this.myForm=new FormGroup({
       control:new FormControl()
    })
    //after subscribe to valueChanges
    this.filteredOptions = this.myForm.get('control').valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

score 0 · Answer 2 · answered Jul 16 '20 at 06:54

I have made a component for autocomplete and use it wherever in my project. autocomplete.component.html:

<mat-form-field class="example-full-width">
    <mat-label> {{label}}</mat-label>
    <input type="text" aria-label="Number" matInput  [matAutocomplete]="auto"  
    [formControl]="myControl">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option.Text}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

autocomplete.component.ts

export class AutocompleteComponent implements OnInit {
  filteredOptions: Observable<SelectedListItem[]>;
  @Output() public onChange: EventEmitter<any> = new EventEmitter();
  @Input() public label: string = "Select";
  @Input() public options: any[];
  @Input() public mycontrol: FormControl;
  myControl = new FormControl();
  constructor() { }
  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => {
          if (value.length > 2) {
            return this._filter(value);
          } else {
            return null;
          }
        })
      );
  }
  displayFn(item: SelectedListItem) {
    try { return item.Text; }
    catch{ }
  }
  private _filter(value: string): any[] {
    var result = this.options.filter(option => 
    option.Text.toLowerCase().includes(value.toLowerCase()));
    this.onChange.emit(result);
    return result;
  }
}

Now you can use autocomplete in any component:

<app-autocomplete (onChange)="getFilterOptions($event,'Numbers')" formControlName="Numbers" [options]="options" [label]=" 'Select'"  ngDefaultControl>
</app-autocomplete>

and component.ts:

 getFilterOptions(options, controlName) {
    this.myForm.get(controlName).reset(options);
  }

Angular mat-autocomplete not filtering values when i use formcontrolname instead [formcontrol]

2 Answers2