如何在表單元素焦點移動的角方式

我有一個表格有一些輸入要素（EL1，EL2 ...）
EL1可能集中在開頭或不
當keydown事件觸發，執行以下操作：
- 如果沒有輸入元件具有焦點，焦點設置爲第一個非空元素
- 如果任何輸入元素具有焦點，檢查是否進入被按下，如果它是移動到下一個任意元素
- 在其他情況下，只是讓鍵做的目的是

我當前的代碼

form.component.html

<form> 
     <input type="text" class="form-control" id="el1" name="el1" 
      required focus 
      [(ngModel)]="el1" #el1 
      (keydown)="processEl1KeyDown($event)" 
     > 
     <input type="text" class="form-control" id="el2" name="el2" 
      required 
      [(ngModel)]="el2" #el2 
      (keydown)="processEl2KeyDown($event)" 
     > 
</form>

form.component.ts

個

@Component({ 
    selector: 'my-form', 
    templateUrl: 'app/form.component.html' 
}) 
export class FormComponent { 

    constructor(private renderer:Renderer) { 
    } 

    el1: string; 
    el2: string 

    @ViewChild("el1") 
    el1El: ElementRef; 

    @ViewChild("el2") 
    el2El: ElementRef; 


    @HostListener('document:keydown', ['$event']) 
    handleKeyboardEvent(event: KeyboardEvent) { 
     if (!this.el1) { 
      this.setFocus(this.el1El); 
     } else { 
      this.setFocus(this.el2El); 
     } 
    } 


    processEl1KeyDown(event: KeyboardEvent) { 
     event.stopPropagation(); 
     if (event.keyCode == 13) { 
      this.setFocus(this.el2El); 
     } 
    } 


    processEl2KeyDown(event: KeyboardEvent) { 
     event.stopPropagation(); 
     if (event.keyCode == 13) { 
      this.submitForm(); 
     } 
    } 

    submitForm() { 
     console.log("submit form"); 
    } 

    setFocus(element: ElementRef) { 
     this.renderer.invokeElementMethod(element.nativeElement, 'focus'); 
    } 
}

問題

如何從FormComponent類中獲得聚焦元素（例如＃EL1，EL2＃）的模板變量的名字嗎？ document.activeElement返回DOM元素。
我可以從DOM獲取Angular2對象嗎？像ElementRef.create('<div></div>')
如果我想傳遞任意字符串到我的setFocus('el1')函數，我該如何構建ElementRef？我可以使用@ViewChild裝飾器，但我需要可以在運行時定義的東西？像新的ViewChild('el1')
什麼會更「Angular2」解決我的問題的方式？使用此答案中提到的BehaviorSubject - Delegation: EventEmitter or Observable in Angular2？

編輯

也許問題並不清楚。總結一下：如果我有n個輸入元素（el1，el2 ... eln），我怎麼知道模塊中哪個元素有焦點（可能通過模板變量），然後將焦點移動到另一個元素上（通過一個字符串，再次對應於另一個模板變量）。我想我正在看angular.element相當於 - Get ComponentRef from DOM element，但我認爲這可能不是正確的方法。

來源

2016-08-18 zeldi

http：// stackoverflow。com/questions/34522306/angular-2-focus-on-newly-added-input-element –

@Günter：我知道這個問題，但是，我不知道它與我的問題有什麼關係。也許我在做一些概念錯誤的事情。我的確改說了我的問題，也許現在更清楚了。 – zeldi

你的問題沒有太接近。只是想連接到它可能會有所幫助。 –

我認爲專注指令可能會解決您列出的大多數問題。我有類似的問題，並寫了這個指令來解決這些問題：

@Directive 
({ 
    selector: '[hasFocus]' 
}) 

export class HasFocusDirective 
{ 
    @Input("hasFocus") hasFocus: boolean; 
    constructor(private elementRef: ElementRef) {} 

    ngAfterViewInit() 
    { 
     if (this.hasFocus) 
     { 
      this.elementRef.nativeElement.focus(); 
     } 
    } 

    ngOnChanges(changes: SimpleChanges) 
    { 
     if (changes["hasFocus"] && changes["hasFocus"].currentValue === true) 
     { 
      this.elementRef.nativeElement.focus(); 
     } 
    } 
}

[hasFocus]是一個布爾值，你可以使用任何布爾表達式來動態地控制使用它的元素的焦點。

來源

2016-08-18 22:46:29 hholtij

@Directive和SimpleChanges可能是正確的方向，但是如何從組件中確定哪個元素關注？你能舉個例子嗎？ – zeldi

如何在表單元素焦點移動的角方式

回答

相關問題