Reactive form vs Dynamic form in Angular

Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.

Angular provides two different approaches to handling user input through forms: reactive and dynamic. Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.

Reactive and dynamic forms process and manage form data differently. Each offers different advantages.

Reactive Forms

Reactive forms provide a model-driven approach to handling form inputs whose values change over time. This guide shows you how to create and update a simple form of control, progress to using multiple controls in a group, validate form values, and implement more advanced forms. This type of forms uses an explicit and immutable approach to managing the state of a form, a given point in time. Each change to the form state returns a new state, which maintains the integrity of the model between changes. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously. It also provides a straightforward path to testing because you are assured that your data is consistent and predictable when requested. Any consumers of the streams have access to manipulate that data safely.

Dynamic

It may be more economical to create the forms dynamically, based on metadata that describes the business object model. This shows you how to use formGroup to dynamically render a simple form with different control types and validation. It's a primitive start. It might evolve to support a much richer variety of questions, more graceful rendering, and superior user experience. All such greatness has humble beginnings. This dynamic form builds an online application experience for heroes seeking employment. You can create the forms on the fly without changing the application code.

Reactive vs Dynamic

• Reactive forms differ from dynamic forms in distinct ways. Reactive forms provide more predictability with synchronous access to the data model, immutability with observable operators, and change tracking through observable streams.

• Dynamic forms can be a very powerful instrument. Imagine you have a varying object model, where the user itself can decide how many fields there are or add additional ones.

• Dynamic forms are created directly from the code in the component. If you're faced with changing requirements and your forms need to constantly change, you can change them without even touching the template.

• Reactive forms are not fully independent from the UI.

• Dynaform is customizable, including graphics, fonts, and colors. This ensures a look and feels that is consistent with the company’s branding. The design and placement of data fields can be tailored for multiple purposes.

• Dynaforms reduce the obstacle by offering an option to create templates for company-wide use.

• To use reactive forms, you need to import the ReactiveFormsModule into your parent module.

• Dynamic forms allow you to repurpose the components for any type of survey as long as it's compatible with the question object model.

• Dynamic forms suitable for simple scenarios and fails for complex scenarios. And Reactive forms handle any complex scenarios.

• In dynamic forms, minimal component code. In reactive forms, more component code and less HTML markup.