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 ponent

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

dynamic-form ponent

<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 ponent

<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?

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 ponent

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

dynamic-form ponent

<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 ponent

<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?

• javascript
• validation
• angular
• typescript
• forms

• Seems to me you would create two separate form groups. The first form group for dob and email, the second for question and answer fields. Initially, the second form is hidden (i'd use ngIf). Once the first form group is validated, then un-hide the second form group and validate it etc – brando Commented Aug 13, 2016 at 3:21
• extending @brando You could use test on the 1st group by evaluating the form $error object for each item. if all <formname>.<fieldname>.$error object null or undefined or 0 length then validation has passed. Using the opposite of stackoverflow./a/35614029/1586498 – OzBob Commented Nov 21, 2016 at 1:28

1 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.