tabIndex（多分？）と角型コンポーネントの使い方は？

Question

は、私はいくつかの材料-入力持っている：ユーザーががに入る押すと

<span *ngFor="let field of listfields"> 
     <material-input #keyp (keyup.tab)="keyupEnter(field,keyp.inputText,keyp)" 
         label="Edit {{getDisplayStr(field)}}" 
         floatingLabel="true" 
         [ngModel]="getFieldValue(field)"> 
     </material-input> 

を、データが保存されますが、フォーカスは現在材料-入力に残ります。自動的にフォーカス/タブを次のマテリアル入力コンポーネントに移動したいと思います。私は手動でタブすることができ、それは動作します。

Iは、（keyup.tab）（置換keyup.enter）を使用して試みたが、のinputText次の（新たに集束）するためのものである材料入力。

キーボードのタブイベントが発生しましたが、これは許可されていないようです。

おかげ

スティーブ

Answer 1

angular_componentsに特異的であるが、任意の角度のアプリを使用すると、フォームの親でこれを行うことができない： @ViewChildren（MaterialInputComponent） QueryList materialInputs。

void onEnter(KeyboardEvent event, MaterialInputComponent input) { 
    event.preventDefault(); 
    final inputs = materialInputs.toList(); 
    var index = inputs.indexOf(input) + 1; 
    if (index >= inputs.length) index = 0; 
    inputs[index].focus(); 
} 

次にテンプレートで次の操作を行います。

<span *ngFor="let field of listfields"> 
    <material-input #keyp (keyup.enter)="onEnter($event, keyp)" 
       label="Edit {{getDisplayStr(field)}}" 
       floatingLabel="true" 
       [ngModel]="getFieldValue(field)"> 
    </material-input>