Is it possible to specify validators in parent form to override children of custom CVA?

Question

I created a custom EditAddressFormComponent form control using ControlValueAccessor.

I have a parent form CompanyComponent that uses the address form control.

Is there a way to specify validators in CompanyComponent to override default child form controls of EditAddressFormComponent, e.g. for street1 set Validators.maxLength(50)?

My form in CompanyComponent looks like this right now:

new UntypedFormGroup({
    id: new UntypedFormControl(),
    name: new UntypedFormControl('', Validators.required),
    description: new UntypedFormControl('', Validators.required),
    companyAddress: new UntypedFormControl({
        street1: '',
        street2: '',
        city: '',
        stateOrProvince: '',
        country: undefined,
        postalCode: '',
    }, Validators.required),
})

And the address is used in the template like this:

<edit-address-form formControlName="companyAddress"></edit-address-form>

I know you can make the address a form group if you are using it as an input in the child form, but when you're using a custom CVA I'm not sure if it's possible.

Answer 1

My solution for this was to extract the EditAddressFormComponent CVA into a base class and to create separate implementations depending on how I need to configure the form controls.

E.g. I now have

export class EditCompanyAddressComponent extends EditAddressComponentBase

and in this class I can design my form group however I want

protected createFormBase(): UntypedFormGroup {
    return new UntypedFormGroup({
        street1: new UntypedFormControl('', [ Validators.required, Validators.maxLength(50) ]),
        street2: new UntypedFormControl(''),
        city: new UntypedFormControl('', Validators.required),
        stateOrProvince: new UntypedFormControl('', Validators.required),
        postalCode: new UntypedFormControl('', Validators.required),
        country: new UntypedFormControl('US', Validators.required),
    });
}