Issue with value update in shared subform

25 Views Asked by At

I have a multi-level form in which two of the second level depends of the same third level. Here is the structure :

Main form

this.mainForm = this._formBuilder.group({
    id: this._formBuilder.control(record.id || 0),this._formBuilder.array(this._chartererForm.initChartererForm(record.recordCharterers)),
    recordDocks: this._formBuilder.array(this._dockForm.initDockForm(record.recordDocks))
})

Charterer form builder

initChartererForm(charterers: Array<RecordCharterer>): Array<FormGroup> {
        let chartererForms: Array<FormGroup> = new Array<FormGroup>()
        charterers.forEach(
            charterer => {
                chartererForms.push(this._formBuilder.group({
                    id: this._formBuilder.control(charterer.id || 0),
                    recordOperations: this._formBuilder.array(this.initOperationForm(charterer.recordOperations))
                }))
            }
        )

        return chartererForms
    }

Operation form builder

initOperationForm(recordOperations: Array<RecordOperation>): Array<FormGroup> {
        let operationForms: Array<FormGroup> = new Array<FormGroup>()
        recordOperations.forEach(
            recordOperation => {
                operationForms.push(this._formBuilder.group({
                    id: this._formBuilder.control(recordOperation.id || 0),
                    quantity: this._formBuilder.control(recordOperation.quantity),
                }))
            }
        )

        return operationForms
    }

Dock form builder

initDockForm(docks: Array<RecordDock>): Array<FormGroup> {
        let dockForms: Array<FormGroup> = new Array<FormGroup>()
        docks.forEach(
            dock => {
                let dockForm = this._formBuilder.group({
                    id: this._formBuilder.control(dock.id || 0),
                    recordOperations: this._formBuilder.array([])
                })

                dockForms.push(dockForm)
            }
        )

        return dockForms
    }

In the charterer form, I can create a new operation by adding a new operation form. In the dock form, I can select one of the charterer form and push it into its recordOperations control.

Record operations are only updated in charterForm, they have readonly use in dockForm.

The problem is when I update an operation which is not pushed in dockForm the mainForm's valueChanges return that the operations updates are made in the charterForm. But when the recordOperations is pushed in a dockForm, the updates are made in the dockForm.

I'd like to know how I can have the change only in the dockForm ?

0

There are 0 best solutions below