Angular2 - 再利用HTML

Question

私は多くのフォームを備えたビジネスUIに取り組んでいます。各フォームは多くの要素で構成されています。各要素をブートストラップ使用 は、次のようになります。

<div class="form-group"> 
    <label for="userName" class="col-sm-3 control-label">User name</label> 
    <div class="col-sm-9"> 
     <input type="text" class="form-control" id="userName" name="userName" placeHolder="User Name" [(ngModel)]="myObj.username"> 
    </div> 
</div> 

そして、これが検証一部を省略している... は、だから私は、これは手に負えなくなっていると、変更がすべて解決するために貼り付け/コピーする必要があります怖いですそれらの入力。

id、表示するテキストなどのいくつかのパラメータに応じて適切なHTMLを実行するのに十分なスマートな "入力コンポーネント"を作成しようとしましたが、[（ngModel）]を取得できませんこのソリューションで作業してください。

これを処理するには良い解決策がありますか？あるいは私はどこにでも私の運命を受け入れ、コピー/ペーストする必要がありますか？

Answer 1

ありがとう@Günterが役に立つ方向を指しています。私inputComponent.htmlは常に[（ngModel）]を持っている= "値"

inputComponent.tsセッターを持っており、

• ：私はhttps://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.htmlを発見し、実用的なソリューションになってしまったあなたのリードに続いて

  value属性のゲッター

次に、データモデルに書き込むためのゲッター/セッターを実装できます。以下のよう

<app-input [type]="'text'" [id]="'username'" [model]="mymodel" ></app-input> 

マイinputComponent.html：

<input *ngIf="type == 'text' [(ngModel)]="value" /> 

マイinputComponent.ts：私のフォームで

---

それは完璧ではありません

get value():any{ 
    return this.model[this.id]; 
} 

set value(val){ 
    this.model[this.id] = val; 
} 

かのようにモデルの値がフォーム外で変化するしかし、それは私の目的のために必要ではありません。