Reactive Forms binding doesn't on production builds

[ynunez]

Please provide the environment you discovered this bug in.

https://github.com/ynunez/analog-reactiveforms-defect

Which area/package is the issue in?

create-analog

Description

When enabling the experimental supportAnalogFormat the form bindings stop working. I created a simple project with a form to demonstrate the problem see the repo URL

After building via npm run build and executing the server via node ./dist/analog/server/index.mjs you'll see the form binding is not working. When you set supportAnalogFormat to false and repeat it works as expected

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

This is a known issue. I think it has to do with reactive forms not being fully integrated with OnPush, which is what the SFCs use by default.

[ajitzero]

The workaround for now is essentially to use the async pipe with valueChanges. Or convert the valueChanges stream to a signal.

So either:

import { toSignal } from '@angular/core/rxjs-interop';

profileFormValue$ = this.profileForm.valueChanges.pipe(
  startsWith({}),
);
profileFormValueSignal = toSignal(this.profileFormValue$);

{{ profileFormValue$ | async | json }}
<!-- or: -->
{{ profileFormValueSignal() | json }}