Formgroup of subform does not propagate errors to root form

[andreashouben]

Hi there,

we have a subform that contains a FormGroup. In that FormGroup I have a required input field. When I touch it The input field get's red, but the root form does not receive the error.

This is our form declaration:

form = createForm<DeepLinkForm>(this, {
    formType: FormType.SUB,
    formControls: {
      deeplinkIdentifier: new FormControl(),
      deeplinkAction: new FormGroup({
        actionIdentifier: new FormControl(),
        action: new FormControl('', Validators.required),
      }),
      freeTexts: new FormArray<FormControl<FreeText>>([]),
      enabled: new FormControl(),
      description: new FormControl(),
      information: new FormControl(),
    },
  });

Notice: The deeplinkAction.action is required.

When I analyze the form with the angular debugger I notice that I get an error in the control:

But the parent formGroupErrors stay null:

I think because of that the root form doesn't get updated. Do you have an idea on what might be the problem?

[maxime1992]

Hello, see #221 (comment)

[andreashouben]

From the comment I read I am not sure if you understood my problem correctly. Even if you did, it didn't help me so maybe I misunderstood something 😅

Anyways, I crated an example that shows my problem.

Please visit my codesandbox

You will find a person form, where first and last name are FormControls on the root form. Here only the last name is required.

The address subform contains two FormGroups which contain only required fields.

When you open the form, it is invalid but once you fill out the last name it becomes valid even if the subforms are still invalid. It seems that a subform with FormGroups doesn't propagate the formGroup errors to to the root form.

In our project I solved this by putting the FormGroups in a separate component with ngx sub forms. But I think this solution should work, too. As FormGroups are a basic feature of angular forms.

I hope we understand each other now. 😄

[maxime1992]

Hello, thanks for the repro. (that said, if we could use Stackblitz instead of Codesandbox, I just had a very unpleasant experience with it, whereas I'm always having a good time with Stackblitz 🔥)

If you want your form to be invalid because your address is missing, add a validator required on the address field. It then behaves as expected 👍 Otherwise it means your entire sub form is not required, which is then fair enough to consider the root form valid if the sub form isn't there

[andreashouben]

Hey @maxime1992. I tried importing the project with stackblitz, but it did not run it properly. Anyway I hope using codesandbox will be okay this time. :-)

If I understand you correctly you're saying that I need to modify the address FormControl in my app.component.ts. Like so:

 formControls: {
            firstName: new FormControl(),
            lastName: new FormControl('', Validators.required),
            address: new FormControl(null, Validators.required),
        }

This adds an extra "invalid line" to my form between name and address:

Now the hole thing behaves even more strange. When I enter just the last name, nothing happens:

I need to enter a required field in the address form to make the form instantly valid.
And the "required line" disappears as well:

The original, problematic behavior still persists. The form is marked valid, even if not all subgroups are valid.

[maxime1992]

This adds an extra "invalid line" to my form between name and address

That's probably based on your style and should be deactived for the property hosting the subform I guess

Now the hole thing behaves even more strange. When I enter just the last name, nothing happens

Correct. It's still invalid right, because the sub form is invalid and not filled up

I need to enter a required field in the address form to make the form instantly valid

Makes sense to me. Your sub form is required and in invalid state. If you fill up your sub form correctly, it's then valid

The original, problematic behavior still persists. The form is marked valid, even if not all subgroups are valid

Yup, agree that something looks shady there.

I don't have time right now to put in ngx-sub-form, so if someone is willing to investigate please have a look