FormGroup all elements are of the same type

[elvispdosreis]

I need to touch all the fields in the form, to mark them as dirty, but I can't interact with the FormGroup, because all the elements of the forms are FormControl, there is no FormGroup and FormArray in the ngx-sub-form

Form

export class PersonComponent extends NgxRootFormComponent<Person>
        protected getFormControls(): Controls<Person> {
                return {
                    id: new FormControl(),
                    name: new FormControl(),
                    address: new FormControl(),
                    files: new FormControl()
                };
        }
}

SubForm
<app-address [formControlName]="formControlNames.address"></app-address>

export class AddressComponent extends NgxSubFormComponent<Address> {
        protected getFormControls(): Controls<Address> {
                return {
                    street: new FormControl(),
                    number: new FormControl(),
                    neighborhood: new FormControl(),
                    city: new FormControl()
                };
        }
}

Function markAsDirty

validateAllFormFields(formGroup: FormGroup, fieldName: string = null): void {
        Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            if (control instanceof FormControl) {
                control.markAsDirty({onlySelf: true});
                control.updateValueAndValidity({emitEvent: false});
            } else if (control instanceof FormGroup) {
                const path = [fieldName, field].filter(x => x != null).join('.');
                this.validateAllFormFields(control, path);
            } else if (control instanceof FormArray) {
                const path = [fieldName, field].filter(x => x != null).join('.');
                control.controls.forEach(i => {
                    if (i instanceof FormGroup) {
                        this.validateAllFormFields(i, path);
                    }
                });
            }
        });
}

[maxime1992]

but I can't interact with the FormGroup, because all the elements of the forms are FormControl, there is no FormGroup and FormArray in the ngx-sub-form

this.formGroup ?

[elvispdosreis]

this.formGroup is a correct FormGroup.

However, a "pessoa" and a FormControl pointing out I don't have access to his controls.
More "pessoa" should be a FormGroup because it groups several FormControl within it

[maxime1992]

It's becoming hard to follow, can you please create a small repro on stackblitz or locally and push on github to explain what you mean?

[elvispdosreis]

clicking on the markDirty button would prefer to touch all fields on the form
this is just an example, but I need to have access to the field control.
sample

[maxime1992]

Thanks for the repro @elvispdosreis.

Do you mean that in your example when clicking on the markDirty button you would like the config to be marked as dirty too?

Or are you only referring to Name and Built in year?

[maxime1992]

As you can see here: https://stackoverflow.com/questions/54943261/reactive-forms-mark-dirty-all-controls-in-form-group this is not because of ngx-sub-form. It's purely because that's how reactive forms behave.

Now if you were referring to the config, as it's a sub form I wonder if it's not because it's the same issue as the one in here: #155 (comment)

[elvispdosreis]

from what I checked, so I'm splitting a form, I understand that it must be a FormGroup or FormArray, today the subform and created with a FormControl, which refers to only one field

[maxime1992]

@elvispdosreis I'm unsure how I can help anymore. Is there anything unclear for you that you believe is on ngx-sub-form side?

If so please give me more info to help you out, if not please close this issue :)

[maxime1992]

I'm going to go ahead and close this issue. Please reopen if you feel it's needed 👍