Rewrite Dynamic form group builder for Angular13+
Tags: angular, form, validations, transform
Published: 2022-01-23 11:14:12

Today I finished rewriting the library

![v2.0.0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtbr17wtdxbo6fsfu4cy.png)
---
The new version has better array support with primitive and class based objects
![Array with booleans](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ylhyf57wdeiz7am3kcy.png)
![Array with object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oycui40a6tk4nj68727q.png)
---
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 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvbf2tfa9c1hnic4f59f.png)
--- 
All class-validators are converted to Angular asynchronous validators, this made it possible to write custom asynchronous validators
![AsyncMustIncludeWordDep](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znibm96sv66ntyn5ktt0.png)![Use AsyncMustIncludeWordDep](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4v30c3rlhc9gnf2owpo.png)
---  
Now it is possible to use several different classes in arrays based on the solution with discriminator from class-transformer
![Multi type template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgsnofwe5lcqv04gn7ef.png) ![Multi type property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19tedzeel2m76e8fqay8.png) ![Multi type classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/di07ygny3kp42eirusfr.png)
---   
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlxis0fpc5jungk7c90d.png)
--- 
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbsbpvbd2dpwsx7c52jt.png)
---
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qecw8ho2o86u980c6wm.png) ![Test result in console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fodew18o4wzke37hqx5k.png)
---
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