当我使用 formcontrolname 代替 [formcontrol] 时，Angular mat-autocomplete 不过滤值答案

【问题标题】：Angular mat-autocomplete not filtering values when i use formcontrolname instead [formcontrol]当我使用 formcontrolname 代替 [formcontrol] 时，Angular mat-autocomplete 不过滤值
【发布时间】：2020-07-16 14:54:56
【问题描述】：

我已经在我的代码中实现了 mat-autocomplete（如在 link 中实现的那样），它运行良好，没有任何问题。

但我需要将 [formcontrol] 更改为 formcontrolname，以便输入框与从 DB 填充的值绑定，并在保存时保存回 DB。

当我使用 formcontrolname 时，一切正常，除了搜索/过滤值。有人可以帮我解决使用 formcontrolname 时的搜索/过滤问题吗？

【问题讨论】：

请将相关代码部分也发布到您的问题中。链接会随着时间的推移而中断，或者不是每个人都可以访问这些链接。
为了改善您的问题，请尝试至少考虑以下建议。将相关代码部分也发布到您的问题中。在发布任何代码或代码链接之前尝试介绍您的问题。寻求帮助是没有用的，因为您已经发布了一个问题，这意味着您需要有关此主题的帮助。我觉得很难理解这个问题。尝试以易于理解的方式描述问题。

标签： angular mat-autocomplete

【解决方案1】：

我想您的问题是您尝试在创建表单之前订阅 valueChanges，您需要在之后进行。例如

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))
      );
  }

【讨论】：

【解决方案2】：

我已经制作了一个用于自动完成的组件，并在我的项目中的任何地方使用它。 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;
  }
}

现在您可以在任何组件中使用自动完成功能：

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

和component.ts：

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

【讨论】：