驗證動態角度2表格

Question

我有一個FormGroup模板驅動驗證。我需要我的公式有一段動態生成的輸入，由ngFor創建。不幸的是，angular2現在需要使用ngModel命名的FormGroup中的每個輸入。我該如何處理它？模板驅動的解決方案是優先考慮的。表單代碼如下：提前

<form #f="ngForm" (ngSubmit)="createProfile()"> 
    <div class="row align-items-center mb-2"> 
     <div class="col-sm-2"> 
      <b>Name:</b> 
     </div> 
     <div class="col-sm-10"> 
      <input type="text" [(ngModel)]="profile.name" class="form-control" 
      name="profileName" required pattern="[a-zA-Z_][a-zA-Z_\-0-9]*"> 
     </div> 
    </div> 

    <div class="channelBox"> 
     <div *ngFor="let c of profile.channels"> 
      <div class="row align-items-center mb-2"> 
       <div class="col-sm-2"> 
        <b>Name:</b> 
       </div> 
       <div class="col-sm-10"> 
        <input type="text" [(ngModel)]="c.name" class="form-control" required 
        pattern="[a-zA-Z_][a-zA-Z_\-0-9]*" name="channelName"> 
       </div> 
      </div> 

      <div class="row align-items-center mb-2"> 
       <div class="col-sm-2"> 
        <b>Filter:</b> 
       </div> 
       <div class="col-sm-10"> 
        <textarea class="form-control" rows="4" [(ngModel)]="c.filter" 
        name="channelFilter"> 
        </textarea> 
       </div> 
      </div> 

      <div class="row align-items-center mb-2"> 
       <div class="col-sm-2"> 
        <b>Sources:</b> 
       </div> 
       <div class="col-sm-10"> 
        <label *ngFor="let s of c.sources"> 
         <input type="checkbox" [(ngModel)]="s.checked" 
         name="channelCheck"> 
         {{ s.name }} 
        </label> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div> 
     <button class="btn btn-success" type="submit" [disabled]="!f.valid"> 
      Create profile 
     </button> 
     <button class="btn btn-default" (click)="d('reason')">Cancel</button> 
    </div> 
</form> 

感謝您的幫助

Answer 1

我猜測你正在尋找這樣的：name="{{'someName'+i}}"。它會縮進循環索引和一些名稱，最好是有意義的。

您還可以使用[name]="'someName' + i"語法。

<div *ngFor="let c of profile.channels; let i=index"> 
      <div class="row align-items-center mb-2"> 
       <div class="col-sm-2"> 
        <b>Name:</b> 
       </div> 
       <div class="col-sm-10"> 
        <input type="text" [(ngModel)]="c.name" class="form-control" required 
        name="{{'someName'+i}}" 
        pattern="[a-zA-Z_][a-zA-Z_\-0-9]*" name="channelName"> 
       </div> 
      </div> 
....