How can we store and re populate form values when a control is unregistered

[RaviTejaVattem]

I have a reactive form with a toggle which mounts and un mounts(unregisters) a huge form onto the main form.

When user checks the checkbox we show a new form(huge form) which will be filled by the user.

After filling the child form, if user unchecks the check box by any chance we are unregistering the child form and also un mounting it from the dom.

But doing so we currently lose all the info filled by the user in the child(huge) form which mandates the user to fill all the info again.

We tried unregister('field', {keepValue: true}) which does retains and populates the data back but we do not want the values to be present when form is submitted after unregistering a control.

Code sand box sample.

In the above sample, we want to populate back the userDetails even after unmounting the userDetails, But not want to see the userDetails when the form is submitted without accepting T&C.

Please let me know if there is any other way to achieve this. TIA.