Angular: adding complex ControlValueAccessors to a FormGroup without setting them to null

Viewed 19

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!

0 Answers
Related