How to take the last value of a javascript increment and add one more?

Question

I have a click function that when it is triggered creates a div below the other, all similar and numbering, for example, div 1, div 2 and so on, every time I click a button. I used the ++ increment only every time I click the button, all the Divs get the same incremented value and need to be in the sequence. I’ll send you some of the codes to understand.

    <div
        *ngFor="let formation of formation_array"
        class="row row-area toggle-div"
      >
        <div class="col-12">
          <h5>Graduação</h5>
          <br />
        </div>
        <div class="col-6 form-group">
          <label for="sel-degree">Curso</label>
          <div>
            <select
              id="sel-degree"
              formControlName="degree"
              class="form-control"
            >
              <option value="" selected>Escolher</option>
              <option value="primary-school">Ensino fundamental</option>
              <option value="high-school">Ensino médio</option>
              <option value="school-tec">Ensino técnico</option>
              <option value="college">Ensino superior</option>
              <option value="master">Mestrado</option>
              <option value="doctor">Doutorado</option>
              <option value="illiterate">Analfabeto</option>
            </select>
          </div>
        </div>
        <div class="col-4 form-group">
          <label for="date-formation">Ano de conclusão</label>
          <input
            id="date-formation"
            formControlName="formation_year"
            type="text"
            class="form-control field-height"
          />
        </div>
        <div class="col-12 form-group">
          <label for="cand-addr">Nome da instituição</label>
          <input
            id="cand-addr"
            formControlName="inst_name"
            type="text"
            class="form-control field-height"
          />
        </div>
      </div>
      <div class="col d-flex justify-content-start">
        <button
          id="btn-add-degree"
          class="btn btn-success"
          (click)="addFormationDiv()"
        >
          + Adicionar outra gradução
        </button>
      </div>

      import { FormGroup, FormControl, Validators } from '@angular/forms';
  import { Component, OnInit } from '@angular/core';
  import { FormationModel } from 'src/app/models/formation-model';

  @Component({
    selector: 'app-candidate-formation',
    templateUrl: './candidate-formation.component.html',
    styleUrls: ['./candidate-formation.component.scss'],
  })
  export class CandidateFormationComponent implements OnInit {
    url: string | null = '';
    formation_div = new FormationModel();
    formation_array: any[] = [];
    formDegree!: FormGroup;
    constructor() {}
    ngOnInit() {
      this.formDegree = new FormGroup({
        degree: new FormControl('', Validators.required),
        formation_year: new FormControl(),
        inst_name: new FormControl(),
        btn_degree: new FormControl(),
      });
      this.formation_array.push(this.formation_div);
    }
    onSelectFile(event: any) {
      if (event.target.files && event.target.files[0]) {
        let reader = new FileReader();

        reader.readAsDataURL(event.target.files[0]);

        reader.onload = (event: any) => {
          this.url = event.target.result;
        };
      }
    }
    public delete() {
      this.url = null;
    }

    addFormationDiv(): any {
      this.formation_div = new FormationModel();
      this.formation_array.push(this.formation_div);
    }
  }

Answer 1

I think I understand what you intend to do. You want to be able to create an undetermined number of forms and list them, right? If so, there is a more elegant form that Angular offers you. I advise you to take a look at Form Arrays.

With a Form Array, you can manage how many Formgroups or Formcontrols and when it comes to displaying them, you use exactly the *ngFor.

As to your question, if you want to display the number of each div on the screen, you can use the index of each element of your formation_array. It is possible to take the value of the index in *ngFor as follows:

<div *ngFor="let formation of formation_array; index as i">
  <span>índice da div: {{ i }}</span>
</div>

That way it works, but I strongly advise you to search on Form Array, beauty?

I hope I’ve helped!