Angular 2 Dynamic Forms How to show/hide a field based on the values of another
<p>Environment: Angular 2 RC 4, Typescript.</p>

<p>I have an implementation of <a href="https://angular.io/docs/ts/latest/cookbook/dynamic-form.html" rel="noreferrer">Dynamic Angular forms</a>. I have 4 fields total - dob, email, question and an answer</p>

<p>Questions:</p>

<pre><code>dob: new TextboxQuestion({
      key: 'dob',
      label: 'Date of Birth',
      value: '',
    }),


    email: new TextboxQuestion({
      key: 'email',
      label: 'Email Address',
      value: '',
      type: 'email',
    }),

    securityQuestion: new TextboxQuestion({
      key: 'challengeQuestion',
      label: 'Security Question',
      value: '',
      disabled: true
    }),
    securityAnswer: new TextboxQuestion({
      key: 'challengeAnswer',
      label: 'Write your answer',
      value: '',
    })
</code></pre>

<p>snippet of the html of main/parent component</p>

<pre><code>&lt;dynamic-form (responsesEvt)="onFormSubmitResponseReceived($event);" [sections]="sections" class="col-md-8"&gt;&lt;/dynamic-form&gt; 
</code></pre>

<p>dynamic-form component</p>

<pre><code>&lt;form (ngSubmit)="onSubmit()" [formGroup]="form"&gt; 
            &lt;div *ngFor="let question of questions" class="form-row" &gt;
                &lt;df-question [question]="question" [form]="form" *ngIf="!section.hidden"&gt;&lt;/df-question&gt;
            &lt;/div&gt;

        &lt;div class="row"&gt;
            &lt;div class="col-md-5"&gt;&lt;/div&gt;
            &lt;div class="col-md-7 btn-row"&gt;
                &lt;button type="submit" class="btn btn-primary pull-right" [disabled]="!form.valid"&gt;I agree with the Terms &amp; Conditions&lt;/button&gt;
                &lt;!--&lt;button type="submit" class="btn btn-primary pull-right" [disabled]="!form.valid || subbmittedalready"&gt;I agree with the Terms &amp; Conditions&lt;/button&gt;--&gt;
                &lt;button type="button" class="btn btn-default pull-right"&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;
</code></pre>

<p>df-question component</p>

<pre><code>&lt;div [formGroup]="form"&gt;
  &lt;div class="col-md-5"&gt;&lt;label class="pull-right" [attr.for]="question.key"&gt;&lt;span class="errorMessage"&gt;*&amp;nbsp;&lt;/span&gt;{{question.label}}&lt;/label&gt;&lt;/div&gt;
  &lt;div class="col-md-7" [ngSwitch]="question.controlType"&gt;
    &lt;input *ngSwitchCase="'textbox'" [formControlName]="question.key" [id]="question.key" [type]="question.type" class="form-control"
      [placeholder]="question.placeHolder"
       /&gt;
  &lt;/div&gt;
  &lt;div class="col-md-5"&gt;&lt;/div&gt;
&lt;/div&gt;  
</code></pre>

<p>Here's my workflow  </p>

<pre><code>Step 1 Initially at form load, only dob and email show up.
Step 2 User types in the dob and email. DOB and email are sent to the backend and if the info is correct, a "question" is returned.
Step 3 Now the question and answer fields appear (assuming that above step was successful). The question field is populated with the value returned from the server through the previous request
Step 4 User submits the form with dob, email, question and answer
</code></pre>

<p>Any ideas on how this can be acheived using Dynamic forms?</p>

<p>I guess I can 
Somehow throw an event after dob, email are filled up, call the backend and get the question.
use a variable to hide/show questnio and answer based on the success/failure of the above response?</p>

<p>If this is a good approach, how can I sense that the user has filled the first two fields and make the backend call. How can I update the question field (specifically using Dynamic forms) after receiving the server resonse?</p>

<p>If not is there a simpler way to  do this?</p>