Angular 2: Using dynamic inputs in reactive forms
<p>I have an angular 2 app that heavily uses forms throughout the application. Most of the forms are built using the reactive forms module in Angular, but the API I am working against also have lots of "dynamic fields". </p>

<p>For instance, the "back-end" allows users to create custom fields for certain posts/pages and I want to offer users the ability to use them in my Angular 2 app as well. </p>

<p><strong>Example</strong></p>

<p>The API gives me a JSON list that looks like this:</p>

<pre><code>{
    "id": "the-custom-field-id",
    "label": "The input label",
    "min": 4,
    "max": 8,
    "value": "The current value of the custom field"
},
...
</code></pre>

<p>Right now, I fetch the list of custom fields in an observable and use <code>ngfor</code> to loop them and produce form elements for each entry, like this:</p>

<pre><code>&lt;div *ngFor="let cf of _customFields" class="form-group"&gt;

    &lt;label&gt;{{cf.label}}&lt;/label&gt;

    &lt;input id="custom-field-{{cf.id}}" type="text" class="form-control" value="{{cf.value}}"&gt;

&lt;/div&gt;
</code></pre>

<p>Then on submit, I reach into the DOM (using jQuery) to get the values using the "IDs" of the custom fields. </p>

<p>This is ugly and goes against the idea of not mixing jQuery and Angular.</p>

<p>There must be a way of integrating these dynamic forms into Angular instead, so I can use them with control groups and validation rules?</p>