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 ?