Question

我希望能够仅通过键盘来尽可能地控制此组件。为此，请确保您在按Tab键时指向正确的控件。当您按下选项卡时，在最后一个表单字段上，它将临时项目添加到列表中，重置临时项目，然后将您集中在第一个行项目字段上。

问题是，如果我想使用同一个帐户拥有2个订单项，那么我第二次尝试按帐户名称的第一个字母（在本例中为'c'）来选择它，因为它会跳过一个选项是先前选择的。我希望清除临时项目后可以重置选项。

要重现我要描述的问题：

输入任意数量的数字

“命中”标签

点击c（它将转到“汽车保险”）

点击标签以提交行并重新开始金额

输入金额

“命中”标签

现在，如果您再次尝试按“ c”，则“汽车保险”不再是第一个选项。由于某种原因，它默认为列表中的下一个项目。

仅当我使用等效材料时，如果使用标准和标签，我不会遇到相同的问题。

这里是相关代码 https://stackblitz.com/edit/angular-tab8tm

Answer 1

因为从技术上讲，您仍在使用相同的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()是使addItem()推动新formControls并自动在视图中创建新字段所需要的。

Dynamic form using *ngFor and submitting values from it

Angular 7材质|清除按键后，按一下键盘上的垫选择自动填充功能不会重置源

1 个答案: