Входное значение нескольких реактивных форм

Question

У меня есть реактивная форма, которая имеет определенное количество массивов форм.Это как продукт, у которого есть вариант, для каждого варианта я добавляю formArray с копией основной группы formGroup.Я могу добавлять, удалять, просматривать, но не редактировать.Когда страница загружает значения последнего formArray заменяет все остальные, как если бы это была какая-то проблема с формой с таким же именем.

Я поставлю код здесь:

шаблон

<div *ngFor="let variation of variations.controls; index as i">
  <div class="collapse" id="variationCollapse{{ i }}">
    <div class="col-lg-12">
       <default-form-box *ngFor="let box of structure.boxes"
             [box]="getTabsOrCommonBox(box)"
             [labels]="structure.labels"
             [rules]="structure.rules"
             [validations]="structure.validations"
             [routes]="structure.routes"
             [formats]="structure.formats"
             [translations]="structure.translations"
             [variation]="structure.variation"
             [isVariation]="false"
             [isUpdate]="true"
             [data]="data.variations[i]"
             [nestedFormGroup]="variationFG"    <---- I guess it's here                                
             [hidden]="!variationService.showBox(structure.variation, box, false)"
                                (notifyValue)="DefaultFormVariationComponent.variationInputItems($event, i)">
                            </default-form-box>
                        </div> 
                    </div>
</div>

компонент

private addVariationsForUpdate() {
        if (this.data && this.isUpdateScenario()) {
            if (this.data.variations.length > 0) {
                this.DefaultFormVariationComponent.variationObj = this.data.variations;
                this.DefaultFormVariationComponent.isUpdate = true;
                this.variationService.isUpdate = true;

                for (let i = 0; i < this.data.variations.length; i++) {
                    this.addsVariation(); <--- check here
                }
            }
            return;
        }
        this.DefaultFormVariationComponent.variationObj = [];
    }

подробно о компоненте

public addsVariation() {
        this.buildVariationForm(); <---- check here
        this.variations.push(this.fb.group(new Variation()));

        this.variationService.index++;
        console.log(this.formGroup.value.variations);
    }

    get variations(): FormArray {
        return this.formGroup.get('variations') as FormArray;
    }

private buildVariationForm() {

        this.variationFG = new FormGroup({}); <--- this is it, each variation has a variationFG as formGroup
        let requiredRules: Object = this.requiredRulesService.prepareRequiredRules(this.structure.rules);
        this.formBuilderService.resetControlFields();
        this.formBuilderService.getFieldsToControls(this.structure.boxes);
        this.reactiveFields = this.formBuilderService.getControlFields();

        for (let reactiveField of this.reactiveFields) {
            this.formBuilderService.build(
                reactiveField.controls,
                this.structure.rules[ reactiveField.field ],
                this.variationFG,
                reactiveField.field,
                this.data
            );
        }
        this.variationFG.validator = this.requiredRulesService
        .requiredValidator(
            requiredRules['required_if'],
            this.formBuilderService
        );
    }

Чтобы вы, ребята, могли лучше понять, в чем проблема, я записал короткое видео (17 секунд), чтобы показать егоВы:

https://drive.google.com/open?id=1AQnIax7BSZEIEyqQwqDDh0L01owt9_j5

На видео я указываю три варианта, каждый из которых называется "тест последнего варианта" + индекс варианта.На видео вы можете четко заметить, что все значения были заменены значениями последнего индекса.

Надеюсь, я смогу получить любую помощь, если понадобится больше кода, я обязательно предоставлю.

Спасибо взаранее:)

Answer 1

Проблема

Проблема в том, что вы используете один и тот же FormGroup variationFG для всех вариантов.Так что, что бы вы ни ставили в конце, оно отражает для всех.

Fix

Вы должны создать отдельный FormGroup для каждого варианта.

1.Создать массив FormGroup

variationFGList = [];

в шаблоне

<div *ngFor="let variation of variations.controls; index as i">
  <div class="collapse" id="variationCollapse{{ i }}">
    <div class="col-lg-12">
       <default-form-box *ngFor="let box of structure.boxes"
             [box]="getTabsOrCommonBox(box)"
             [labels]="structure.labels"
             [rules]="structure.rules"
             [validations]="structure.validations"
             [routes]="structure.routes"
             [formats]="structure.formats"
             [translations]="structure.translations"
             [variation]="structure.variation"
             [isVariation]="false"
             [isUpdate]="true"
             [data]="data.variations[i]"
             [nestedFormGroup]="variationFGList[index]" <- Get the FormGroup for variation                                
             [hidden]="!variationService.showBox(structure.variation, box, false)"
                                (notifyValue)="DefaultFormVariationComponent.variationInputItems($event, i)">
                            </default-form-box>
                        </div> 
                    </div>
</div>

в деталях компонента

private buildVariationForm() {

        let variationFG = new FormGroup({}); //this is local variable now
        let requiredRules: Object = this.requiredRulesService.prepareRequiredRules(this.structure.rules);
        this.formBuilderService.resetControlFields();
        this.formBuilderService.getFieldsToControls(this.structure.boxes);
        this.reactiveFields = this.formBuilderService.getControlFields();

        for (let reactiveField of this.reactiveFields) {
            this.formBuilderService.build(
                reactiveField.controls,
                this.structure.rules[ reactiveField.field ],
                 variationFG,
                reactiveField.field,
                this.data
            );
        }
        variationFG.validator = this.requiredRulesService
        .requiredValidator(
            requiredRules['required_if'],
            this.formBuilderService
        );
        this.variationFGList.push(variationFG); //Add new formGroup to the Array
    }

ПРИМЕЧАНИЕ. Код был изменен в stackoverfloweditor так что может быть опечатка и синтаксическая ошибка.Пожалуйста, исправьте себя.