After spending a few weeks working with Angular 2, I am currently tackling the task of creating dynamic forms for a system settings page. The objective is to have the API return multiple forms, construct these forms within tabs, incorporate various types of input fields, and then prefill these forms with default or previously saved data for users to modify and save.
So far, I have successfully managed to create multiple forms with an arbitrary number of input fields. However, I am now facing a new challenge – populating these forms with data obtained from separate API calls. The first call generates the form structure while the second one provides the data required to populate each field.
The issue lies in dynamically binding this data to specific forms without using the typical ng-model approach. To further clarify, my workflow involves receiving information about the form names and quantities through an initial API call. Subsequently, another API call supplies the layout details for each form. After successfully building all forms, a third API call furnishes the necessary configuration data for each form, which needs to be appropriately linked.