formControlName with *ngFor

Question

I have a form with 3 fields q will be used by the user: a select, a textarea and an input.

These fields are filled with an ngFor q data comes from the database:

<form id="form-group" [formGroup]="AddForm">
  <div>

    <div class="row p-3 hours_week" *ngFor="let subType of day1">
      <!-- ! -->
      <div class="col text-light">
        <p>Data:</p>
        <p class="text-light" formControlName="DATA_DIA">{{formatDate(subType.DATA_DIA)}}</p>
      </div>
      <!-- ! -->
      <div class="col text-light">
        <label>Cod.Evento:</label><br>
        <label>{{subType.CODIGO_EVENTO}}</label>
      </div>
      <!-- ! -->
      <div class="col text-light">
        <label>Descrição:</label><br>
        <label>{{subType.DESCRICAO}}</label>
      </div>
      <!-- ! -->
      <div class="col text-light">
        <label>Tipo da Marc:</label><br>
        <label>{{subType.TIPO_MARC}}</label>
      </div>
      <!-- ! -->
      <div class="col text-light">
        <label>Qtde.Calcul:</label><br>
        <label>{{replace_all(subType.QT_CAL_SIS,".",":")}}</label>
      </div>
      <!-- ! -->
      <div class="col text-light">
        <label>Motivo:</label><br>
        <select [name]="subType.RESULT+motivoHtml" formControlName="MOTIVO">
          <option value="" selected>Motivos</option>
          <option *ngFor="let motivos of motivo" value="{{motivos.CODIGO_MOTIVO}}">{{motivos.DESCRICAO}}</option>
        </select>
      </div>
      <!-- ! -->
      <div class="col text-light">
        <label>Obs:</label><br>
        <textarea formControlName="OBS" cols="50" rows="2" placeholder="Observação" type="text" class="form-control"
           min="0" max="10"> </textarea>
      </div>
      <!-- ! -->
      <div class="col text-light">
        <label>Arquivo:</label><br>
        <input formControlName="UPLOAD" type="file" ng2FileSelect [uploader]="uploader" multiple id="{{subType}}SlotsInput"
           class="text-light" (change)="inputFileChange($event)" multiple>
      </div>
      <!-- ! -->
      <span class="linha" *ngIf="onClass"></span>
      <!-- ! -->



    </div>

  </div>

  <!-- ! -->

  <div class="row">

    <div class="col">
      <button type="submit" class="btn btn-primary button_salve btn-lg" (click)="finalizar()">Finalizar</button>
    </div>

    <div class="col">
      <button class="btn btn-danger btn-lg button_cancel" [routerLink]="['/bh-home']">Cancelar</button>
    </div>

  </div>
  <!-- ! -->

</form>

Only Addform only takes the last data filled in by ngFor, and you have to take them all. Can I use formControl by taking all *ngFor data?

Answer 1

The Formgroup is used to group responses from inputs and the formControl is to store in a variable and pass this information to the Formgroup so that you can be working with them, in which case you would need to explain better what you are planning to do and put the file Component. so that it can analyze.

Answering your question yes and possible, the formControl only took the last dice because it is a input recommend taking a look at the documentation of angular. you can use the angular material to help you in this form, you will find many examples there.

I hope I’ve helped.