Using index to disable the button

Question

Hey I have a list that creates me a form for each tasks. I would like the button to be disabled when the form has been "un-dirty"(dirty). At the moment I gave to the button [disabled]=".form,dirty", it works. but when I complete something in one form all the others unlock? How to use index or hm something else to fix this problem?

  <div class="div-table-row">
    <div *ngFor="let item of items" class="div-table-col h6">
      {{ item }}
    </div>
  </div>
  <div *ngFor="let task of tasks; let i = index" class="div-table-row">
    <div class="div-table-col">{{ task.id }}</div>
    <div class="div-table-col">{{ task.name }}</div>
    <a class="btn-toogle" (click)="isCollapsed[i] = !isCollapsed[i]">{{isCollapsed[i] ? "hidden ": "Show"}}
      <mdb-icon fas icon="{{ isCollapsed[i] ? 'up' : 'down' }}"></mdb-icon>
    </a>
    <div *ngIf="isCollapsed[i]" class="div-container">
      <h6 class="mb-3 mt-3 h6">{{ task.name }}</h6>
      <form [formGroup]="Form">
        <div formGroupName="tests">
          <div class="row form-group">
            <div class="col-sm-4">
              <input formControlName="id1" type="number" class="form-control" />
            </div>
            <div class="col-sm-4">
              <input formControlName="id2" type="number" class="form-control" />
            </div>
            <div class="col-sm-4">
              <input formControlName="id3" type="number" class="form-control" />
            </div>
          </div>
          <div class="row form-group">
            <div class="col-sm-4">
              <input formControlName="id4" type="number" class="form-control" />
            </div>
            <div class="col-sm-4">
              <input formControlName="id5" type="text" class="form-control" />
            </div>
            <button [disabled]="!form.dirty" (click)="onSave(i, task.id)">
              Zapisz
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

Answer 1

The easiest way would be to assign each item of your tasks array a new property called form (or similar).

Then you could assign the individual form like <form [formGroup]="task.form"> and check for dirtiness like <button [disabled]=".task.form,dirty" (click)="onSave(i. task.id)"> .

If you afterwards only want to get the array of values from all forms, you can simply use this.tasks.map(task => task.form.value) to get this array.