Angular change focus on enter in reactive forms

Question

I have created a table and a button which creates dynamic rows inside the table with inputs. When i press enter in the first input i want to create new row (which i have done) but not able to focus in the new input. Here is what I've tried

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

.ts code:

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

I've tried this and also this but not able to make it work. Please help.

Peter Kim · Answer 1 · 2018-09-27T18:48:59.967

You can use ViewChildren.

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

Add #inputToFocus in your input tag. <input ... #inputToFocus>

Edit

I don't know how you're adding a new input, but you can use the following code.

.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>

Note that I'm using .last now.

When using this, this first input is focused but when a new input is added, it doesn't changing the focus. — Isurendrasingh, Sep 27 '18 at 06:15

sancelot · Answer 2 · 2018-10-01T13:47:31.480

I am providing this sample code , that will permit you to take control over focus in a form.This sample code will focus next field each time you press enter or arrow Down key. It is up to you to customise it to your needs. This sample code shows it works with bootstrap too .

basically,any input fields are recorded in a table. Then, it is up to you to enable focus on which one you want. if you dynamically add an input field, the table will be updated.

I have not found better way with angular.

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


 
    
}

Angular change focus on enter in reactive forms

2 Answers2

Edit