如何動態命名模板引用變量？

我的模板上有很多樣板代碼，它們大致遵循這種結構。如何動態命名模板引用變量？

<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>

第二個錯誤塊用於返回的任何服務器驗證。

我曾希望做一個指令，可能只是像<validatedInput [inputName] = "startDate" />這樣的東西，並替換每個屬性中的關鍵元素。無論如何動態地改變像#startDate="ngModel"到#{{inputName}}="ngModel"。 ngIf也必須動態設置。

我正在運行「@ angular/forms」：「0.1.1」。

來源

2016-07-06 tylerjgarland

查看Angular 2 formbuilder。利用這一點，我認爲你可能能夠實現你正在尋找的東西。 – hholtij

模板變量是純靜態的。你不能動態地命名它們。 –

Günter指出模板引用變量是靜態的。但是，使用Angular 2 formbuilder可能不再需要它們。

在你的組件，你可以創建表單組是這樣的：（注：formbuilder需要被注入到你的組件構造函數）

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

和修改HTML來是這樣的：

<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的另一個優點是它們的元素是Observables，它允許你做各種有趣的事情。

來源

2016-07-07 05:52:04 hholtij

如何動態命名模板引用變量？

回答

相關問題