I'm facing a problem related to FormGroups and ControlValueAccessors.
I've made a root Editor component, containing a FormGroup. Inside it, I've got some other components, all of them made of multiple FormGroups, FormArrays and FormControl. A pretty nested structure. They also all implements ControlValueAccessor interface.
So, my root Editor component template looks like this:
editor.component.html
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<app-section-tax-payer-data formControlName="taxPayerData"></app-section-tax-payer-data>
<app-section-regions formControlName="regions"></app-section-regions>
<app-section-other-entities formControlName="others"></app-section-other-entities>
</form>
Editor controller looks like this:
editor.component.ts
export class EditorComponent implements OnInit {
editorForm = this.fb.group({
taxPayerData: null,
regions: null,
others: null
});
Components look like this:
section-regions.component.ts
export class SectionRegionsComponent implements OnInit, ControlValueAccessor {
regionsFormGroup = this.fb.group({
rows: this.fb.array([]),
creditSum: { value: null },
debtSum: { value: null },
balance: { value: null }
});
constructor(private fb: FormBuilder) {
this.rows.forEach((i) => {
// Create form controls for each row
this.rowsFormArray.push(this.fb.group({
regionCode: null,
tributeCode: null,
instalment: null,
referenceYear: [null, { validators: [Validators.pattern("^[0-9]*$")] }],
debtAmount: [null, { validators: [Validators.pattern("^[0-9]*$")] }],
creditAmount: [null, { validators: [Validators.pattern("^[0-9]*$")] }],
}))
}
}
My problem is the following: if I add the other FormControls to editorForm in this way, I'm setting them to null, losing their inner structure (FormArray containing FormGroups containing FormControls).
Is there a way to retrieve them and tell Angular to use them "as they are"? Each component is already initializing their internal structure, I don't get why I need to specify a value when adding a FormControl.
Thanks for anyone helping, I just started using Angular (coming from AngularJS) and I'm kinda lost here!