How should I add values in 2-level array format to a formGroup?

25 Views Asked by At

I want to insert values, and then read them like this in the frontend (key is 0, 1, 2, 3...):

form?.get(['configuration','configurationMilestone', field?.nameFieldInitial1, key])

This is the method I build the form:

 createControlFormArray(configuration, group) {
    const config = this.form.get('configuration') as FormGroup;
    const newFormArray = this.fb.array([]);

    configuration.forEach(() => {
        newFormArray.push(this.fb.control(null));
    });

    const configGroup = configuration.reduce((acc, item, index) => {
        acc[item] = newFormArray.at(index);
        return acc;
    }, {});

    const newFormGroup = this.fb.group(configGroup);
    config.addControl(group, newFormGroup);
 }

This is the method I want to add the value, but it's not adding the values, it gives an error:

createFormListInitialWithDefaultValue(config, dataMark, disabled = false) {
    
    const formArray = this.form.get(['configuration','configurationMilestone', dataMark.nameFieldInitial1]) as FormArray;
     formArray.value.push(this.fb.control(dataMark.defaultValue1));
    
}

To create the form, you basically take part of the context of a constant above:

const dataMarkInitial = {
        labelName1:categoriesMenu.LABELS.RESULTS_MARKER_LABEL_1,
        fieldProgress1: 'toAchieveProgressInitial',
        fieldProgress2: 'toSurpassProgressInitial',
        nameFieldInitial1:'resultsMarkerNameInitial',
        nameFieldInitial2:'resultsMarkerPercentInitial',
        nameFieldFinal1:'resultsMarkerNameFinal',
        nameFieldFinal2:'resultsMarkerPercentFinal',
        placeholder1: categoriesMenu.LABELS.RESULTS_MARKER_PLACEHOLDER_INITIAL_1,
        placeholderStart: '0',
        placeholderGoal: '100',
        labelName2:categoriesMenu.LABELS.RESULTS_MARKER_LABEL_2,
        matchesProgress: categoriesMenu.LABELS.MATCHES_PROGRESS,
        ruleProgress1: categoriesMenu.LABELS.RESULTS_MARKER_RULE_1,
        ruleProgress2: categoriesMenu.LABELS.RESULTS_MARKER_RULE_2,
        defaultValue1:'',
        defaultValue2:null,
        defaultValue3:'PROPORTIONAL_CAL',
        defaultValue4:null,
        progressOptions:[
            {id: 'PROPORTIONAL_CAL', name: categoriesMenu.LABELS.OPTIONS.CALCULATED_PROPORTIONALLY},
            {id: 'BACK_PROGRESS', name: categoriesMenu.LABELS.OPTIONS.PROGRESS_FROM_PREVIOUS_MILESTONE}
        ],
        disabled: true
    }

    const milestoneInitial = [
        dataMarkInitial.fieldProgress1,
        dataMarkInitial.fieldProgress2,
        dataMarkInitial.nameFieldInitial1,
        dataMarkInitial.nameFieldInitial2,
        dataMarkInitial.nameFieldFinal1,
        dataMarkInitial.nameFieldFinal2,
        'progressOptions'
    ]
    //create form
    this.createControlFormArray(milestoneInitial, 'configurationMilestone');
0

There are 0 best solutions below