テンプレート参照変数にどのように動的に名前を付けることができますか？

Question

私はテンプレートに、この構造にほぼ従う定型コードをたくさん持っています。

<div class="form-group col-lg-6" 
    [ngClass]="{'has-error': errors?.startDate || !startDate.valid}"> 
    <label>Start Date</label> 
    <input class="form-control" 
      [(ngModel)]="currentEntity.startDate" 
      #startDate="ngModel" name="startDate" 
      required /> 
    <small *ngIf="!startDate.valid" class="help-block"> 
     Start Date Is Required 
    </small> 
    <small *ngIf="errors?.startDate" class="help-block"> 
     {{errors.startDate}} 
    </small> 
</div> 

2番目のエラーブロックは、戻ってくるサーバーの検証です。

私は、<validatedInput [inputName] = "startDate" />のようなものになり、各プロパティのキー要素を置き換えることを望んでいました。 #startDate="ngModel"を#{{inputName}}="ngModel"に動的に変更する方法はありますか？また、動的に設定する必要があります。

私は "@ angular/forms"を実行しています： "0.1.1"。

Answer 1

テンプレート参照変数は、Günterが指摘しているように静的です。ただし、Angular 2フォームビルダを使用すると、もう不要になることがあります。

this.myForm = this.formBuilder.group 
({ 
    "startDate": [currentEntity.startDate, Validators.required], 
    ... 
}); 

をし、このような何かにあなたのhtmlを変更します（コンポーネントのコンストラクタに注入する必要がformbuilder。注）： ：あなたのコンポーネントで

次のようなフォームグループを作成することができます

<div class="form-group col-lg-6" [ngClass]="{'has-error': errors?.startDate || !startDate.valid}"> 
     <label>Start Date</label> 
     <input class="form-control" [formControl]="myForm.controls['startDate']" name="startDate" /> 
     <small *ngIf="!myForm.controls['startDate'].valid" class="help-block"> 
     Start Date Is Required 
     </small> 
    ... 

ここではRC4のフォーム構文を使用しています。 さらに、FormGroup配列を繰り返し処理し、* ngForで複数のそのようなコントロールを作成することができます。 （これを行うには、FormGroupから関連情報を抽出するための一時配列が必要な場合があります）。

FormGroupsのもう1つの利点は、その要素がすべての種類の面白いことを行うことができるObservablesであるという事実です。