2017-07-20 27 views
1

DOM要素(私の場合は入力)を角度2で追加する最も良い方法は何ですか?角度2キー入力時に入力要素を追加

私はComponentFactoryResolverを使用する必要がありますか、またはこれらの簡単な方法には簡単な方法がありますか?

私はこれが必要です - ユーザーが入力に何かを入力すると、同じ入力を以下に追加します(最初の入力された文字に1回だけ)。

その後、私は同じ機能を追加する必要がありますが、最後の入力などでは... もっと属性を入力したい場合など、もう1つのフィールドを追加することで簡単にできます。ここで

はjQueryを使って解く例です。

$(document).on("keypress", ".addanother", function() 
{ 
    $(".inputList").append('<div class=\"row\"><div class=\"col-lg-5\"><input type="text" placeholder="Attribute" class="form-control addanother" /></div>' + 
               '<div class=\"col-lg-5\"><input type="text" placeholder="Value" class="form-control"/></div></div>'); 
    $(this).removeClass("addanother"); 
}); 

おかげで

+1

は 'FormBuilder'と' * ngFor'で作成した 'FormArray'を使用してください。チュートリアルを読んでください。 – cgTag

答えて

0

うん、あなたはドキュメントをご覧ください。

HTML::

<button (keypress)="addAnother()">add</button> 
<div *ngFor="let form of formdivs"> 
    <div class="row"> 
    <div class="col-lg-5"> 
     <input type="text" placeholder="Attribute" class="form-control addanother" /></div> 
    <div class="col-lg-5"><input type="text" placeholder="Value" class="form-control" /></div> 
    </div> 
</div> 

そして、コントローラ内:

public formdivs: any[] = []; 

    addAnother(): void { 
    this.formdivs.push({});//Add info for new div if needed 
    } 

希望の出発点として役立ちますただし最初のアプローチは、このようなものかもしれません。 CSSの一部は、このようなボタンに配置されることがあります。

[ngClass]="{'addAnother': formdivs.length == 0}" 
関連する問題