はどのように私はプログラムで動的にAngular2

Question

でFormControlを作成するためにフォーカスを設定しない私は、動的にFormGroupを追加で入力フィールドにフォーカスを設定することはできていないようですまたはAbstractControl？

Answer 1

DOMエレメントではないため、FormControlまたはAbstractControlに設定することはできません。あなたがしなければならないことは、どういうわけか彼らに要素の参照があり、その上に.focus()と呼ぶことです。これはViewChildren（現在のところ、APIドキュメントは存在しない、2016-12-16）を通じて実現できます。あなたのコンポーネントクラスで

：

import { ElementRef, ViewChildren } from '@angular/core'; 

// ...imports and such 

class MyComponent { 
    // other variables 
    @ViewChildren('formRow') rows: ElementRef; 

    // ...other code 
    addNewRow() { 
     // other stuff for adding a row 
     this.rows.first().nativeElement.focus(); 
    } 
} 

あなたが最後の子に注力したい場合は...のようなthis.rows.last().nativeElement.focus()

そして、あなたのテンプレートで何か：

<div #formRow *ngFor="let row in rows"> 
    <!-- form row stuff --> 
</div> 

EDIT：

私は実際にあなたが探しているものをやっている誰かのCodePenを見つけましたhttps://codepen.io/souldreamer/pen/QydMNG

Answer 2

これは安全な方法では、次のように上記の回答のすべてを組み合わせ、角度5に対する角度

@Component({ 
    selector: 'my-comp', 
    template: ` 
    <input #myInput type="text" /> 
    <div> Some other content </div> 
    ` 
}) 
export class MyComp implements AfterViewInit { 
    @ViewChild('myInput') input: ElementRef; 

    constructor(private renderer: Renderer) {} 

    ngAfterViewInit() { 
    this.renderer.invokeElementMethod(this.input.nativeElement,  
    'focus'); 
    } 
} 

Answer 3

によってお勧め：

コンポーネント関連コード：

import { AfterViewInit, QueryList, ViewChildren, OnDestroy } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 

// .. other imports 

export class MyComp implements AfterViewInit, OnDestroy { 
    @ViewChildren('input') rows: QueryList<any>; 
    private sub1:Subscription = new Subscription(); 
    //other variables .. 

// changes to rows only happen after this lifecycle event so you need 
// to subscribe to the changes made in rows. 
// This subscription is to avoid memory leaks 
ngAfterViewInit() { 
    this.sub1 = this.rows.changes.subscribe(resp => { 
    if (this.rows.length > 1){ 
     this.rows.last.nativeElement.focus(); 
    } 
    }); 
    } 

    //memory leak avoidance 
    ngOnDestroy(){ 
    this.sub1.unsubscribe(); 
    } 


    //add a new input to the page 
    addInput() { 
    const formArray = this.form.get('inputs') as FormArray; 

    formArray.push(
     new FormGroup(
     {input: new FormControl(null, [Validators.required])} 
    )); 
    return true; 
    } 

// need for dynamic adds of elements to re 
//focus may not be needed by others 
trackByFn(index:any, item:any){ 
    return index; 
} 

テンプレートロジックは次のようになります。

<div formArrayName="inputs" class="col-md-6 col-12" 
    *ngFor="let inputCtrl of form.get('phones').controls; 
      let i=index; trackBy:trackByFn"> 
    <div [formGroupName]="i"> 
     <input #input type="text" class="phone" 
      (blur)="addRecord()" 
      formControlName="input" /> 
    </div> 
</div> 

私のテンプレートでは、ぼかしのレコードを追加しますが、次の入力フィールドを動的に追加するボタンを簡単に設定することもできます。重要な部分は、このコードでは、新しい要素が必要に応じてフォーカスを取得することです。

私はあなたが