Using Angular 2 focus on next input field with enter key press

Question

I am new in angular 2. How can I move focus to next control on key enter in Angular 2. I implement this code but how not working properly. Please suggest me how I do this. Thanks

My component code

import { Component,Injectable,Inject,OnInit, OnDestroy, EventEmitter, Output, Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
import {Http, Response} from '@angular/http';
import {TestService} from '../../services/test.service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

import { RouterModule } from '@angular/router';
import { ActivatedRoute,Params } from '@angular/router';

@Component({
    selector : 'test_block',
    templateUrl : './partials/test_block.html',
    providers: [TestService]
})
@Directive({
    selector: '[test_block]'
})

export class TestComponent {


    private el: ElementRef;   
    @Input() test_block: any;
    branch_outstanding:any = [];
    charges:any = [];

    searched_charges:any = [];

    constructor(private test_service:TestService,  @Inject(ActivatedRoute) private route: ActivatedRoute, private _el: ElementRef,public renderer: Renderer) {        
        this.el = this._el;
    }

    @HostListener('keydown', ['$event']) onKeyDown(e:any) {
        if ((e.which == 13 || e.keyCode == 13)) {
            e.preventDefault();
            let control:any;
            control = e.srcElement.nextElementSibling;
            while (true){                
                if (control) {
                  if ((!control.hidden) && 
                     (control.nodeName == 'INPUT' || 
                      control.nodeName == 'SELECT' || 
                      control.nodeName == 'BUTTON' || 
                      control.nodeName == 'TEXTAREA'))
                     {
                            control.focus();
                            return;
                        }else{
                            control = control.nextElementSibling;
                        }                         
                }
                else {
                    console.log('close keyboard');
                    return;
                }            
            }
        }
    } 
}

Shows error in console:

Unhandled Promise rejection: Could not compile 'TestComponent' because it is not a component. ; Zone: ; Task: Promise.then ; Value: Error: Could not compile 'TestComponent' because it is not a component.

I don't know what is issue on this code. Please suggest me.

I think it is because you are using two decorators for a single class. — Pengyy, Apr 17 '17 at 05:35
the question your refered is for a directive called `onReturn`, you have to define your own component(class) for `test_block`. — Pengyy, Apr 17 '17 at 05:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141851/discussion-between-sandip-kakade-and-pengyy). — sandip kakade, Apr 17 '17 at 05:45
You shoul seperate your component and directive. Make a separate file for directive.Please Refer:[link](https://angular.io/docs/ts/latest/guide/attribute-directives.html) — Binal Vekariya, Apr 17 '17 at 06:00

score 2 · Accepted Answer · answered Apr 17 '17 at 11:58

Finally got the solution

I created two different decorators for TestComponent mention @Component and @Directive.
After that @Directive I import in to my test.module.ts like this
import { TestDirective } from './test.directive';
It's very important in html bind <input test_block type="text"> if you not bind test_block then code not working properly

score 1 · Answer 2 · answered Apr 17 '17 at 08:35

1

It could be lack of declaration, add TestComponent to declarations at app.module.ts

answered Apr 17 '17 at 08:35

Aguss

11
2

score 0 · Answer 3 · answered Sep 17 '17 at 18:07

0

The usage is very limited. eg it will not work when using bootstrap css. because with renderer2, it is not possible to access childnodes

<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<input  type="number"  class="form-control" required [onReturn]>
</div>
<div class="col-md-4">
<input type="number"  class="form-control" required >
</div>
<div class="col-md-5">
<input type="number"  class="form-control" required >
</div>
<div class="col-md-3">
<input type="number"  class="form-control" required >
</div>
</div>
</div>
</div>

answered Sep 17 '17 at 18:07

sancelot

1,905
12
31

Hi.have you found a solution that works with bootstrap? – mrapi Jun 19 '18 at 11:36
1

At this time, I did not, but few people posted some ideas here https://github.com/angular/angular/issues/15674#issuecomment-333392750 – sancelot Aug 28 '18 at 15:44
1

One solution could be using dependency injection and in this case my input fields would become a component I will be able to navigate through using dependency injection https://angular.io/guide/dependency-injection-navtree – sancelot Sep 19 '18 at 09:41

Using Angular 2 focus on next input field with enter key press

3 Answers3

Linked