Angular 2 Dynamic Forms How to show/hide a field based on the values of another

Question

Environment: Angular 2 RC 4, Typescript.

I have an implementation of Dynamic Angular forms. I have 4 fields total - dob, email, question and an answer

Questions:

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: '',
    })

snippet of the html of main/parent component

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

dynamic-form component

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

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

df-question component

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

Here's my workflow

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

Any ideas on how this can be acheived using Dynamic forms?

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?

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?

If not is there a simpler way to do this?

Answer 1

I know this is a delayed answer, but I think essentially this Scotch.io post covers the basics of what you need to do.

You create a form group and swap out the validations based on the value of a field, and in the view, you hide the fields you disabled using ngIfs.