DEV Community

Cover image for Rewrite Dynamic form group builder for Angular13+
ILshat Khamitov
ILshat Khamitov

Posted on

Rewrite Dynamic form group builder for Angular13+

Today I finished rewriting the library

v2.0.0

The new version has better array support with primitive and class based objects
Array with booleans

Array with object

The ValidateIf validator now works, but due to the specifics of how Angular forms work, for correct operation, you need to mark the fields on which this validation depends

ValidateIf

All class-validators are converted to Angular asynchronous validators, this made it possible to write custom asynchronous validators

AsyncMustIncludeWordDepUse AsyncMustIncludeWordDep

Now it is possible to use several different classes in arrays based on the solution with discriminator from class-transformer

Multi type template Multi type property Multi type classes

The new version has a hard binding to the class-transformer, since the metadata assigned by the class-transformer is used to determine the types of controls

need Expose or Exclude decorators

To implement new features, the original class-transformer had to be abandoned, since it does not publish the meta date that it collects.
Fork that publishes metadata to the global - https://github.com/petrzjunior/class-transformer (PR: https://github.com/typestack/class-transformer/pull/929)

New imports

As before, a fork is used to support error translations - https://github.com/EndyKaufman/class-validator-multi-lang (PR: https://github.com/typestack/class-validator/pull/743)

For correct parse metadata, need remove compilerOptions.downlevelIteration and append compilerOptions.emitDecoratorMetadata: true in tsconfig.json

In the current version, native Angular validators for controls are not supported, in the next versions, I will try to implement them, the implementation logic will be different from the original one provided by Angular

For more frequent updates of dependencies and adding new features, integration tests were implemented, part of the functionality is covered, the rest of the code will be covered when I have time

Test result as comment Test result in console

All the features of the new api can be tested on stackblitz: https://stackblitz.com/edit/ngx-dynamic-form-builder-new-api

In view mode on the official website of the library: https://endykaufman.github.io/ngx-dynamic-form-builder/home

Top comments (0)