Multiple reactive forms input value

Question

I have a reactiveForm that has a certain number of formArrays. It's like, a product that has a variation, for each variation I add a formArray with a copy of the main formGroup. I can add, delete, view but not edit. When the page loads the values of the last formArray substitutes all others, as if it were some problem with the form having the same name.

I will put the code here:

the template

<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>

the component

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 = [];
    }

the component-in detail

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
        );
    }

For you guys to have a better ideia of what the problem is, I recorded a short video (17 seconds) to show it to you:

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

On the video I point three variations, each one named "last variation test" + the index of the variation. On the video you can clearly notice that all values were replaced by the last index's values.

Hope I can get any help, if more code is needed I'll surely provide.

Thanks in advance :)

Answer 1

Issue

The issue is you using the same FormGroup variationFG for all variations. So whatever you put at the end its reflecting for all.

Fix

You should create separate FormGroup for each variations.

1. Create FormGroup Array

variationFGList = [];

the template

<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>

the component-in detail

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
    }

NOTE : The code was modified in stackoverflow editor so there could be typo and syntactical error. Please correct yourself.