[Docs] Provide examples of usage with `@angular/forms`

[jpsullivan]

Documentation

Relevant Radix Component(s)

(All form-related primitives)

it would be great to provide users with information about the proper ways of using these components with Angular's form constructs (i.e. typed templated forms, reactive forms, whatever else is coming). For example, under the hood the RdxRadioGroupDirective implements ControlValueAccessor, which in theory should make it possible to use these with formControlName props.

We should provide thorough examples of how to either leverage these form-related properties, or explain how to wrap them in their own ControlValueAccessor if they're looking for a hybrid approach.

Examples from other doc sites

N/A

[github-actions[bot]]

Hey @jpsullivan! Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉

[pimenovoleg]

🚀 Great suggestion! Forms are a huge part of Angular.

For example, we’ve already added a “Reactive Forms” section to the Switch docs: https://sb-primitives.radix-ng.com/?path=/docs/primitives-switch--docs#reactive-forms 🔗

Do you have any examples of good documentation on this topic?

[jpsullivan]

Nice, I hadn't seen that one! That's perfect.

I think simple examples like that are exactly what is needed, but there should also be another set of examples -- how to leverage this when "wrapping" the primitive.

As an example, say you're building something like OriginUI-NG and you want to provide a Switch component (ori-switch) that uses the Switch primitive under the hood. Showing how to leverage the built-in support for Reactive Forms so that devs can do <ori-switch formControlName="myField">... would be really helpful.

[pimenovoleg]

Exactly, examples in extended components are needed 👍

I think I even need a guide like "how to create your own design system based on RadixNG"

[jpsullivan]

Both would be perfect!

[pimenovoleg]

added simple example for Checkbox https://github.com/radix-ng/primitives/pull/322

https://primitives-git-feat-checkbox-forms-example-radix-angular.vercel.app/?path=%2Fdocs%2Fprimitives-checkbox--docs#reactive-forms

I'll also think about how to design an example where an extended component is in a form..

[pimenovoleg]

We've migrated the checkbox primitive to use Signals and updated the related form examples. https://github.com/radix-ng/primitives/blob/main/packages/primitives/checkbox/stories/checkbox-forms.ts

Since working with forms is a critical part of our library, we will likely add more examples in the future. Any further improvements can be tracked in separate tickets.

This task is now complete and can be closed.