Как создать n formgroup для каждого элемента массива - PullRequest
Новая
       23

Как создать n formgroup для каждого элемента массива

0 голосов
/ 15 апреля 2020

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

  <p-tabView #tabView *ngIf="answers && answers.length > 0" (onChange)="changeTab($event)">
        <p-tabPanel *ngFor="let answer of answers; let i = index;" [closable]="true">
            <ng-template pTemplate="header">
                <span [innerText]="headerRisposte(answer.order)"></span>
            </ng-template>
            <!-- pulsantiera risposte -->
            <!-- <div class="row mb-2">
                    <div class="col-12">
                        <div class="btn-group mr-2 pull-right">
                            <button type="button" class="btn btn-primary"
                                tooltip="{{'questionario.cancella_risposta'|translate}}"
                                (click)="removeRisposta($event, i)">
                                <span class="fa fa-trash"></span>
                            </button>
                        </div>
                    </div>
                </div> -->
            <!-- form answers -->
            <form [formGroup]="answerFormGroup" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-left">
                <div class="row w-100 mb-1">
                    <!-- testo risposta -->
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 form-group">
                        <label class="font-weight-bold">{{'questionario_testo' | translate}}</label>
                        <span class="badge badge-danger pull-right"
                            *ngIf="utils.hasRequiredField(risposteFormGroup.get('testo-'+i))" translate>
                            {{deviceService.isDesktop() ? 'Obbligatorio' : 'Obbligatorio.mobile'}}
                        </span>
                        <textarea formControlName="testo-{{i}}" class="questionario-input-border form-control"
                            type="text" rows="2" cols="90"></textarea>
                    </div>
                </div>
            </form>
        </p-tabPanel>
</p-tabView>

, где answer - это массив. Я хочу создать группу FormGroup для каждого ответа и отобразить их. 

  for (let i = 0; i < this.answers.length; i++) {

        this.risposteFormGroup.addControl('testo-' + i, new FormControl(this.answers[i].testo, Validators.required));
        this.risposteFormGroup.addControl('help-' + i, new FormControl(this.answers[i].help));
        this.risposteFormGroup.addControl('valore-' + i, new FormControl(this.answers[i].valore, Validators.required));
        this.risposteFormGroup.addControl('rangeValoreDa-' + i, new FormControl(this.answers[i].rangeValoreDa, Validators.required));
        this.risposteFormGroup.addControl('rangeValoreA-' + i, new FormControl(this.answers[i].rangeValoreA, Validators.required));
        this.risposteFormGroup.addControl('idDomandaNext-' + i, new FormControl(this.answers[i].idDomandaNext));
        this.risposteFormGroup.addControl('idSchedaNext-' + i, new FormControl(this.answers[i].idSchedaNext));
        this.risposteFormGroup.addControl('order-' + i, new FormControl(this.answers[i].order, Validators.required));
    }

Я попробовал этот подход, он создал одну группу FormGroup и добавил N элемента управления формы в той же группе Form

...