необходимо создать несколько групп, используя форму в angular6

Question

Мне нужно создать несколько групп в форме.когда я создаю дочернюю группу и ввожу входное значение, то же значение отражается в другой группе, я знаю, что это связано с ngModel, но как решить эту проблему.есть еще одна проблема, с которой я сталкиваюсь в childGroup. Есть две таблицы, когда я создаю другую childGroup и добавляю новую строку таблицы в эту childGroup, что также будет отражено в другой childGroup.

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'.Как реализовать проверку этого цикла в цикле.Пожалуйста, помогите мне с этим вопросом.