Угловой материал => Mat-chip - автозаполнение (ввод) при выборе выпадающего через пробел

Question

Как заполнить mat-chip onkeypress(spacebar), когда мы выбираем mat-option, выбрав опцию с помощью клавиши со стрелкой и нажав клавишу пробела (32).

Однако, это нормально работает, когда мы выбираем выпадающее меню поперейдите к опции с помощью клавиши со стрелкой и затем нажмите клавишу ввода (код клавиши-13), но не работайте аналогичным образом с клавишей пробела (код -32).

Вот ссылка на стек: - https://stackblitz.com/edit/angular-ytk8qk-feaqaw?file=app/chips-autocomplete-example.html

1) How to add select dropdown option by going through
  arrowkey(not mouse) and populating selected option using spacebar(keycode- 32).

2)How to remove option from dropdown that is already populated or used.

3)Show dropdown only when user enters some charcter in input text else show 
  class="info"` text only in dropdown, when no input text is there and no 
 option in dropdown matches enter charcters in input.

Note:- The user can create chips by typing in input and then press ENTER or SPACE key (separator key) for creating chips.

chip.component.ts

export class ChipsAutocompleteExample {
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  separatorKeysCodes: number[] = [ENTER,SPACE, COMMA];
  fruitCtrl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruits: string[] = ['Lemon'];
  allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];

  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
  @ViewChild('auto') matAutocomplete: MatAutocomplete;

  constructor() {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }

  add(event: MatChipInputEvent): void {
    // Add fruit only when MatAutocomplete is not open
    // To make sure this does not conflict with OptionSelected Event
    if (!this.matAutocomplete.isOpen) {
      const input = event.input;
      const value = event.value;

      // Add our fruit
      if ((value || '').trim()) {
        this.fruits.push(value.trim());
      }

      // Reset the input value
      if (input) {
        input.value = '';
      }

      this.fruitCtrl.setValue(null);
    }
  }

  remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
  }
}

Answer 1

1) Как добавить опцию выпадающего списка, пройдя через кнопку со стрелкой (не мышь) и заполнив выбранную опцию, используя пробел (код клавиши 32).

1. Добавитьсвойства для хранения выбранного фрукта и отображаемых в данный момент фруктов (отфильтрованных):

   selectedFruit = -1; displayedFruits = [];

2. После просмотра init подпишитесь на изменения в keyManager, чтобы получить выбранныйи изменения в отфильтрованных фруктах, чтобы получить отфильтрованный список и сохранить его в отображаемых фруктах:

   ngAfterViewInit() { this.matAutocomplete._keyManager.change.subscribe((index) => { if (index >= 0) { this.selectedFruit = index; } }) this.filteredFruits.subscribe((filteredFruits) => { this.displayedFruits = filteredFruits; }); }

3. В методе add добавьте предложение else, чтобы включитьфрукты и сброс выбранных фруктов: -1:

   add(event: MatChipInputEvent): void { // Add fruit only when MatAutocomplete is not open // To make sure this does not conflict with OptionSelected Event if (!this.matAutocomplete.isOpen) { // ... } else { if (this.selectedFruit >= 0) { this.fruits.push(this.displayedFruits[this.selectedFruit]) this.fruitInput.nativeElement.value = ''; this.fruitCtrl.setValue(null); } else if (this.fruitInput.nativeElement.value !== '' && this.displayedFruits.length === 0) { this.fruits.push(this.fruitInput.nativeElement.value) this.fruitInput.nativeElement.value = ''; this.fruitCtrl.setValue(null); } } this.selectedFruit = -1; }

2) Как удалить параметр из раскрывающегося списка, который уже заполнен или используется.

Усовершенствуйте фильтр, чтобы также проверять уже использованные фрукты:

private _filter(value: string): string[] {
  const filterValue = value.toLowerCase();

  return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0 && !this.fruits.find( existingFruit => existingFruit === fruit ));
}

3) Показывать раскрывающийся список, только когда пользователь вводит какой-либо символ во входном тексте, иначе show class = "info" `текст только в выпадающем списке, когда нет входного текста и нет опциив выпадающих списках введите символы ввода.

Если я все понял правильно, вы можете сделать следующее:

1. Привязать к событию фокуса ввода, чтобы отобразить автозаполнение при вводенаходится в фокусе

   <input placeholder="New fruit..." #fruitInput (focus)="matAutocomplete.showPanel = true" [formControl]="fruitCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)">

2. Измените шаблон автозаполнения, чтобы отображать дополнительный параметр class = "info", когда текст не введен или значение не соответствует:

   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)"> <mat-option class="info" *ngIf="displayedFruits.length === 0 || fruitInput.value === ''" disabled>Test</mat-option> <ng-container *ngIf="fruitInput.value !== ''"> <mat-option *ngFor="let fruit of displayedFruits" [value]="fruit"> {{fruit}} </mat-option> </ng-container> </mat-autocomplete>

Рабочий стекблиц здесь