Angular mat-autocomplete не фильтрует значения, когда вместо этого я использую formcontrolname [formcontrol]

Я реализовал mat-autocomplete в своем коде (как это реализовано в ссылка) и работает без проблем.

Но мне нужно изменить [formcontrol] на formcontrolname, чтобы поле ввода было привязано к значениям, заполненным из БД и сохраненным обратно в БД при сохранении.

Когда я использую formcontrolname, все работает хорошо, кроме значений поиска/фильтрации. Может ли кто-нибудь помочь мне в устранении проблем с поиском/фильтром при использовании formcontrolname.


angular mat-autocomplete
person Santhosh    schedule 16.07.2020    source источник
comment
Пожалуйста, разместите соответствующую часть кода также в своем вопросе. Ссылки со временем ломаются или не у всех есть доступ к этим ссылкам.   -  person Alessandro Giusa    schedule 16.07.2020
comment
Чтобы улучшить свой вопрос, попробуйте рассмотреть хотя бы следующие советы. Разместите соответствующую часть кода также в своем вопросе. Постарайтесь представить свою проблему, прежде чем публиковать какой-либо код или ссылки на код. Просить о помощи бесполезно, так как вы уже размещаете вопрос, который подразумевает, что вам нужна помощь по этой теме. Мне трудно понять проблему. Постарайтесь представить проблему так, чтобы ее было легко понять.   -  person Alessandro Giusa    schedule 16.07.2020

Ответы (2)


arrow_upward
0
arrow_downward

Я предполагаю, что ваша проблема в том, что вы пытаетесь подписаться на 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))
      );
  }
person Eliseo    schedule 16.07.2020

arrow_upward
0
arrow_downward

Я сделал компонент для автозаполнения и использую его везде в своем проекте. автозаполнение.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);
  }
person elham dabiri    schedule 16.07.2020