Angular: Форма с FormGroup с ngFor. Как собирать данные?

Question

Я хочу создать форму для выбора предсказания нескольких теннисных игр между игроком 1 и игроком 2.

Я помещаю NgFor для отображения моих игр, и у меня есть formControlName = "predictionUser _ {{index}} "для каждой игры.

Моя проблема в том, что я не знаю, как получить свои данные из этой формы." predictionUser _ {{index}} не будет соответствовать predictionUser моего метода onSavePrediction?

Более того. Вы хоть представляете, как я могу связать этот прогноз с идентификатором совпадения?

Вы можете увидеть мой код html ниже и мой метод onSavePrediction ():

<div class="row">
  <div class="col-xs-12">
    <form [formGroup]="predictionForm" (ngSubmit)="onSavePrediction()">
      <h2>The games</h2>
      <div class="list-group"
          class="list-group-item"
          *ngFor="let index = index; let match of matches | keyvalue async">
      <h3> Day {{match.value.Day}}</h3>
      <h4 class="list-group-item-heading">{{ match.value.player1 }} - {{ match.value.player2 }}</h4>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio"  id="inlineRadio1" value="1" formControlName="predictionPlayer_{{index}}">
        <label class="form-check-label" for="inlineRadio1">1</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" id="inlineRadio2" value="2" formControlName="predictionPlayer_{{index}}">
        <label class="form-check-label" for="inlineRadio2">2</label>
      </div>
      </div>
      <p></p>
        <button class="btn btn-success" [disabled]="predictionForm.invalid"
                type="submit">Enregistrer
        </button>
    </form>
    </div>
</div>

  onSavePrediction(){
    const idUser="init";
    const predictionUser = this.predictionForm.get('predictionUser').value;
    const idMatch="init";

    const newPrediction = new Prediction(idPlayer,predictionUser,idMatch);

    this.predictionService.createNewPrediction(newPrediction);
  }

Answer 1

Можете ли вы просто использовать данные FormGroup внутри метода onSavePrediction? Не совсем понятно, чего вы пытаетесь достичь с помощью метода onSavePrediction. Я бы использовал идентификатор совпадения в вашей форме вместо индекса.

  onSavePrediction(){
    const idUser="init";
    const predictionUser = this.predictionForm.get('predictionUser').value;
    const idMatch="init";

    // do something with the data here?
    // what is the value of the formdata here? is it of the form ~={predictionPlayer_0 : value, predictionPlayer_1: value}
    const formdata = this.predictionForm.value; 


    const newPrediction = new Prediction(idPlayer,predictionUser,idMatch);

    this.predictionService.createNewPrediction(newPrediction);
  }

Я бы подумал, что вы хотите, чтобы formControlName было связано с вашим совпадением, а значение - с игроком.

например,

<div class="list-group"
          class="list-group-item"
          *ngFor="let index = index; let match of matches | keyvalue async">
      <h3> Day {{match.value.Day}}</h3>
      <h4 class="list-group-item-heading">{{ match.value.player1 }} - {{ match.value.player2 }}</h4>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio"  id="inlineRadio1" [ngValue]="match.value.player1" formControlName="match.value.id">
        <label class="form-check-label" for="inlineRadio1">{{match.value.player1}}</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" id="inlineRadio2" [ngValue]="match.value.player2" formControlName="match.value.id">
        <label class="form-check-label" for="inlineRadio2">{{match.value.player2}}</label>
      </div>