Question

我创建了一个表和一个按钮，该按钮在表内使用输入创建了动态行。当我在第一个输入中按Enter键时，我想创建一个新行（我已经完成了），但是无法专注于新输入。这是我尝试过的

<input type="text" class="form-control" placeholder="Product Code" formControlName="product_code" tabindex="{{i+1}}" (keyup.enter)="autoProduct($event)">

.ts代码：

autoProduct(event) {
    this.addProduct();
    if (event.keyCode === 13) {
      event.preventDefault();
      const inputs =
        Array.prototype.slice.call(document.querySelectorAll('input'));
      console.log(inputs);
      const index =
        (inputs.indexOf(document.activeElement) + 1) % inputs.length;
      console.log(index);
      const input = inputs[index];
      console.log(input);
      input.focus();
      input.select();
    }
  }

我已经尝试过this和this，但无法使其正常工作。请帮忙。

Answer 1

您可以使用ViewChildren。

private inputToFocus: any;
@ViewChildren('inputToFocus') set inputF(inputF: any) {
  this.inputToFocus = inputF
  this.inputToFocus.first.nativeElement.focus();
}

在您的#inputToFocus标记中添加input。 <input ... #inputToFocus>

编辑

我不知道您如何添加新输入，但是您可以使用以下代码。

.ts：

import { Component, ViewChildren } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  counts = [1];
  private inputToFocus: any;
  @ViewChildren('inputToFocus') set inputF(inputF: any) {
    this.inputToFocus = inputF
    this.inputToFocus.last.nativeElement.focus();
  }

  autoProduct(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      const inputs =
        Array.prototype.slice.call(document.querySelectorAll('input'));
      const index =
        (inputs.indexOf(document.activeElement) + 1) % inputs.length;
      this.addProduct(index);
      const input = inputs[index];
      input.focus();
      input.select();
    }
  }
  addProduct(i) {
     this.counts.push(i)
  }
}

.html：

<div *ngFor="let count of counts; let i=index">
  <input type="text" class="form-control" placeholder="Product Code" tabindex="{{i+1}}" (keyup.enter)="autoProduct($event)" #inputToFocus>
</div>

请注意，我现在正在使用.last。

Answer 2

我正在提供此示例代码，它将使您能够控制表单中的焦点。每次按Enter或向下箭头键时，该示例代码都会将焦点移到下一个字段。您可以根据自己的需要定制它。此示例代码显示了它也可以与引导程序一起使用。

基本上，任何输入字段都记录在一个表中。然后，由您决定要集中在哪个目标上。如果您动态添加输入字段，则表将被更新。

我还没有找到更好的方法。

editor.component.html

<div >
<form>
<!-- container-fluid prend toute la largeur de la vue -->
<div class="container-fluid" *ngFor="let item of data; let i = index"  >
  <div class="form-group">
  <div class="row">
  <div class="col-md-3">{{item.designation}}</div> 
  <div class="col-md-2">{{item.type}} </div>
  
  <div *ngIf="item.type == 'float'"class="col-md-2">{{item.value  | number : '1.1-3'}} </div>
  <div *ngIf="item.type == 'int'"class="col-md-2">{{item.value  | number }} </div>

<div class="col-md-2">
<input #input  type="number"   class="form-control" (keydown)="onKeydown($event,i)">
</div>

  <div class="col-md-3">{{item.commentaire}}  </div>
  </div> <!-- row -->
</div> <!-- form group -->
</div> <!--container-fluid-->

</form>
</div> <!--form-->

editor.component.ts：

import { Component, OnInit } from '@angular/core';
import { ViewChildren, QueryList } from '@angular/core';
@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})


export class EditorComponent implements AfterViewInit {

// Viewchildren
// https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e

@ViewChildren("input") inputs: QueryList<any>

constructor() { 
	}


private onKeydown(event,val)
{
console.log(event.key);
if ((event.key == "Enter")  || (event.key == "ArrowDown"))
{
// focus next input field
if (val +1 < this.inputs.toArray().length)
   this.inputs.toArray()[val+1].nativeElement.focus();
else this.inputs.toArray()[0].nativeElement.focus();
}
}


private processChildren(): void {
  console.log('Processing children. Their count:', this.inputs.toArray().length)
}

  ngAfterViewInit() {
    console.log("AfterViewInit");
    console.log(this.inputs);
    this.inputs.forEach(input => console.log(input));

    // susbcribe to inputs changes, each time an element is added (very optional feature ...)
    this.inputs.changes.subscribe(_ => 
      this.processChildren() // subsequent calls to processChildren
  );
}


 
    
}

角度变化着眼于以反应形式输入

2 个答案:

编辑