angular - 多种反应形式输入值

Question

我有一个具有一定数量 formArrays 的 reactiveForm。这就像一个有变体的产品，对于每个变体，我都添加了一个带有主 formGroup 副本的 formArray。我可以添加、删除、查看但不能编辑。当页面加载最后一个 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

在视频中，我指出了三个变体，每个变体都命名为“最后一个变体测试”+变体的索引。在视频中，您可以清楚地注意到所有值都已替换为最后一个索引的值。

希望我能得到任何帮助，如果需要更多代码，我一定会提供。

提前致谢 ：）

标签： angularformsreactive

Answer 1

问题

问题是您FormGroup variationFG对所有变体都使用相同的。因此，无论您放在最后，它都反映了所有人。

使固定

您应该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
    }

注意：代码已修改，stackoverflow editor因此可能存在拼写错误和语法错误。请纠正自己。