angular - 将焦点从活动元素设置到文档中的下一个输入

问题描述

我试图将焦点从一个输入移到下一个输入，它们是使用 Angular 中的表单构建器成对创建的。

this.pesos.push(
            this.fb.group({
              peso: this.fb.control(""),
              nombre: this.fb.control("")
            })
          );

当按下回车键时，这段代码将生成更多的两个输入，我希望它的第一个被聚焦。但是，如果在每对的第一个上按下 enter，焦点应该转到第二个，而不是生成一个新的对。所以在尝试了不同的逻辑之后，我认为最好的方法是找到关注的内容，然后跳转到文档中的下一个输入。

 <div *ngFor="let peso of pesos.controls; let i = index" [formGroupName]="i" class="formsubconjuntohorizontal">

          <mat-card class="width100 formsubconjuntohorizontal spacebetween" style="background-color: #f8f8f8;">
              <mat-form-field>
                <mat-label>Peso</mat-label>
                <input
                  matInput
                  [style.color]="
                    pesos.at(i).get('peso').value > formulario.get('capacidad').value
                      ? 'red'
                      : 'black'
                  "
                  type="number"
                  formControlName="peso"
                  (keyup.enter)="FocusNext(i);"
                  autoFocus
                />
              </mat-form-field>
              <mat-form-field>
                <mat-label>Casa</mat-label>
                <input matInput type="text" formControlName="nombre" type="text" (keyup.enter)="FocusDown(i+1);" autoFocus/>
              </mat-form-field>
              <mat-card style="width: 40px;" (click)="deletePeso(i)" style="cursor:pointer; background-color: #ffebeb">
                <button type="button" mat-mini-fab color="primary" (click)="deletePeso(i)">
                  <mat-icon>delete_forever</mat-icon>
                </button>
              </mat-card>
          </mat-card>
        </div>

我试图在 document.activeElement 和 document.queryselectorAll('input') 之间找到一些东西，但我不知道这是否是正确的方法，或者表单生成器是否有更简单的方法。

更新

.ts 文件

 @ViewChildren('input') inputs:QueryList<ElementRef>
  ngAfterViewInit() {
    this.inputs.last && this.inputs.last.nativeElement.focus()
    this.numberOfInputs = this.inputs.length;
    this.inputs.changes.subscribe(() => {
      if (this.inputs.length)
        this.inputs.last.nativeElement.focus()
    })
  }

FocusDown(){
  this.pesos.push(
    this.fb.group({
      peso: this.fb.control(""),
      nombre: this.fb.control("")
    })
  );

 FocusNext(){
 document.querySelectorAll('input')[document.querySelectorAll('input').length-1].focus();
}

.html 文件：

<mat-card class="width100 formsubconjuntohorizontal spacebetween" style="background-color: #f8f8f8;">
              <mat-form-field>
                <mat-label>Peso</mat-label>
                <input #input
                  matInput
                  [style.color]="
                    pesos.at(i).get('peso').value > formulario.get('capacidad').value
                      ? 'red'
                      : 'black'
                  "
                  type="number"
                  formControlName="peso"
                  (keyup.enter)="FocusNext();"
                  autoFocus
                />
              </mat-form-field>
              <mat-form-field>
                <mat-label>Casa</mat-label>
                <input matInput type="text" formControlName="nombre" type="text" (keyup.enter)="FocusDown();" autoFocus/>
              </mat-form-field>
              <mat-card style="width: 40px;" (click)="deletePeso(i)" style="cursor:pointer; background-color: #ffebeb">
                <button type="button" mat-mini-fab color="primary" (click)="deletePeso(i)">
                  <mat-icon>delete_forever</mat-icon>
                </button>
              </mat-card>
          </mat-card>

至于现在，当解除回车时，第一个输入焦点转到第二个输入焦点。但是当我在第二个输入中这样做时，会获得焦点并失去它。我也得到这个错误。

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'mat-form-field-should-float: false'。当前值：'mat-form-field-should-float: true'。

标签： angularinputfocusformbuilder

<mat-form-field> <mat-label>Peso</mat-label>  <input #input matInput ..../> </mat-form-field> <mat-form-field> <mat-label>Casa</mat-label> <input matInput .../> </mat-form-field>

angular - 将焦点从活动元素设置到文档中的下一个输入

问题描述

解决方案

推荐阅读