Угловой 7 Материал |автозаполнение mat-select при нажатии клавиш не сбрасывает источник после его очистки - PullRequest
Новая
       7

Угловой 7 Материал |автозаполнение mat-select при нажатии клавиш не сбрасывает источник после его очистки

0 голосов
/ 14 декабря 2018

Я хочу иметь возможность управлять этим компонентом с помощью одной клавиатуры в максимально возможной степени.Я делаю это, следя за тем, чтобы вы указали на нужный элемент управления на вкладке.В последнем поле формы, когда вы нажимаете клавишу табуляции, он добавляет временный элемент в список, сбрасывает временный элемент и фокусирует вас обратно на поле первой строки.

Проблема в том, если я хочу иметь 2 строкиэлементы с той же учетной записью, второй раз, когда я пытаюсь выбрать его, нажав первую букву имени учетной записи (в данном случае 'c'), он пропускает параметр, потому что он был выбран ранее.Я хотел бы, чтобы параметры сбрасывались при очистке временного элемента.

Чтобы воссоздать проблему, которую я пытаюсь описать:

Введите любое число для суммы

Хит таб

Нажмите c (перейдет в раздел «Страхование автомобиля»)

Нажмите на вкладку, чтобы отправить строку и начать заново с суммы

Введите сумму

Нажмите вкладку

, и теперь, если вы попробуете снова нажать «c», «Страхование автомобиля» больше не является первым вариантом.По умолчанию это следующий элемент в списке.

У меня не возникает такой же проблемы, если я использую стандартные и теги, только когда я использую материальные эквиваленты.

Вот соответствующий код https://stackblitz.com/edit/angular-tab8tm

1 Ответ

0 голосов
/ 15 декабря 2018

Поскольку технически вы все еще используете тот же mat-select ... и не создаете новый ... старое значение все еще находится в mat-select ...

Существует keyManager за компонентом MatSelect, управляющим всей этой логикой, и поскольку вы помещаете текущие значения в новый массив и сбрасываете ngModel ..., вам также необходимо перейти к keyManager и установить значения по умолчанию.

Создать templateRef для корня mat-select из #select

<mat-form-field class="temp-item-field" *ngIf="accounts">
        <mat-select #select [(ngModel)]="tempItem.accountId" placeholder="Account">
          <mat-option *ngFor="let account of accounts" [value]="account.id">{{account.name}}</mat-option>
        </mat-select>
      </mat-form-field>

Создать @ViewChild в компоненте, чтобы получить ссылку 

 @ViewChild('select') _select

В вашем addItem() установите значения activeItem и activeItemIndex по умолчанию.

addItem() {
    if (this.tempItem.amount && this.tempItem.accountId) {
      this.tempItem.transactionId = this.transaction.id;
      this.transaction.transactionItems.push(this.tempItem);
      this.tempItem = new TransactionItem();
      this.focusTransactionAmount();
      this._select['_keyManager']['_activeItem'] = undefined;
      this._select['_keyManager']['_activeItemIndex'] = -1;     
    }
  }

Stackblitz

https://stackblitz.com/edit/angular-ywrz7v?embed=1&file=src/app/app.component.ts

Лично я бы рекомендовал вам использовать для этого ReactiveForms и создать новыйполей через FormControlArray ... вместо "смещения" ваших текущих значений из текущих полей в новые и сброса исходных корневых полей ...

В принципе вы можете сделать обратное тому, что высейчас делаем ... создайте новые поля с новыми formControls и новыми state на tab, оставляя текущие введенные значения там, где они есть ... и, по сути, сможете избежать этого и используя ngModel все вместе.

Пожалуйста, посмотрите этот SO-ответ, где я предоставил обзор того, как реактивные формы работают в цикле *ngFor ... вместе с примером stackblitz.

buildForm() в stackblitz будетпо сути, это то, что вам нужно, чтобы получить addItem() нажатие нового formControls, которое автоматически создает новые поля в представлении.

Динамическая форма с использованием * ngFor и отправка значений из нее

...