验证动态角度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> 
....