需要使用angular6中的表单创建多个组

Question

我需要在表单中创建多个组。当我创建一个子组并输入一个输入值时，同一值反映在另一个组中，我知道这是由于ngModel引起的，但如何克服此问题。当我创建另一个childGroup并向该childGroup添加新表行时，childGroup下还有2个表，这也是我要面对的另一个问题。

HTML

<fieldset *ngFor="let task of tasks; let a = index">
  <legend>childGroup</legend>
  <button (click)="deleteRow(a)" class="btn btn-sm btn-circle btn-danger actionMargin rmv-btn">X</button>
  <div class="row">
    <section class="col col-6">
      <label class="label">Name</label>
      <label class="input">
        <input type="text" class="input-sm" [(ngModel)]="task.Name" name="task[a].Name" required>
      </label>
    </section>
    <section class="col col-6">
      <label class="label">Comm</label>
      <label class="input">
        <input type="text" class="input-sm" [(ngModel)]="task.Config.command" name="task[a].Config.command" required>
      </label>
    </section>
  </div>
  <!--Table-->
  <section>
    <h2>ABC</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th class="name">S no.</th>
          <th class="name">Label</th>
          <th class="name">Value</th>
          <th class="name">Dynamic</th>
          <th class="name">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of task.ports; let i = index">
          <td align="center"><label>{{i + 1}}</label></td>
          <td><input type="text" [(ngModel)]="item.Label" name="item[i].Label" [ngModelOptions]="{standalone: true}"
              class="inputborder" required></td>
          <td><input type="number" [disabled]="item[i].boolean" [(ngModel)]="item[i].Value" name="item.Value"
              [ngModelOptions]="{standalone: true}" class="inputborder" required></td>
          <td><input type="checkbox" [(ngModel)]="item[i].boolean" name="item[i].boolean" class="check"
              [ngModelOptions]="{standalone: true}" required><span class="yes">Yes</span></td>
          <td align="center"><button (click)="deleteRow(i,'port')" placement="top" tooltip="Remove Port" class="btn btn-sm btn-circle btn-danger actionMargin rmv-btn">X</button></td>
        </tr>
      </tbody>
    </table>
    <button type="button" (click)="Addrow('port')" placement="top" tooltip="Add Port" class="btn btn-sm btn-primary posi">Add
      abc</button>
  </section>
</fieldset>

TS。

tasks= [];
 taskObj = { //click on a blue + button i am pushing this object to tasks
    Name: "",
    Config: {
      command: ""
    },
    artifacts : [],
    ports : []
  };
// to add a table row
  Addrow(i) {
    if (i == 'port') {
      let num = 0;
      this.taskObj.ports.push({
        Label: '',
        Value: num,
        boolean: true
      });
    } else {
      this.taskObj.artifacts.push({
        Source: '',
        Relative: ''
      })
    }
    console.log(this.tasks);
  }
//remove the table row
  deleteRow(index, i) {
    if (i == "port") {
      this.taskObj.ports.splice(index, 1);
    } else {
      this.taskObj.artifacts.splice(index, 1);
    }
  }

我的HTML代码没有添加“ XYZ”表代码，因为它与“ ABC”表相同。如何在循环内对该循环实施验证。请帮助我解决这个问题。