Angular 變化專注於以反應形式輸入

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();
    }
  }

我已經嘗試過這個和這個，但無法使它工作。 請幫忙。

Answer 1

您可以使用ViewChildren 。

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

在input標簽中添加#inputToFocus 。 <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 或向下箭頭鍵時，此示例代碼將聚焦下一個字段。 您可以根據自己的需要對其進行自定義。 此示例代碼顯示它也適用於引導程序。

基本上，任何輸入字段都記錄在表格中。 然后，由您決定專注於您想要的那個。 如果動態添加輸入字段，表格將被更新。

我還沒有找到更好的角度方法。

編輯器.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 ); } }