fix(dynamic-forms): dynamically add, edit, remove Form Controls

[jerryorta-dev]

Description

Per issue #624 reported, the td-dynamic-forms component did not allow having it's elements array changes after view rendered.

The issue is caused by manually building Form Controls structure provided based elements config array, causing race conditions and reference errors as the elements array is changed after view render.

The fix is to use the FormArray API to add, edit, and remove Form Controls after View Render. As the elements config array changes during runtime, the FormArray adds, removes, and changes Form Controls as needed.

There are no breaking changes.

What's included?

At test branch with a form to add, remove, edit Form Controls is provided.

Research:

• angular.io - FormArray
• angular.io - guide guide to reactive-forms
• stackoverflow - dynamically adding controls
• tutorial

Test Steps

• git checkout feature/624-dynamic-forms
• run ng lint
• run npm test or ng test
• run ng serve
• navigate to http://localhost:4200/#/bug-624
• Play with build your own form demo

General Tests for Every PR

• ng serve --aot still works.
• npm run lint passes.
• npm test passes and code coverage is not lower.
• npm run build still works.

Screenshots

closes #624

[emoralesb05]

• chore(): simplify code by adding/removing controls and forcing a manual refresh (refresh method)
• chore(dynamic-forms): load README.md and add refresh method to its API
• feat(dynamic-forms): make flex width % configurable via element interface
• feat(dynamic-forms): add demo to build your own form

[kyleledbetter]

Pushed docs demo update: