Angular 2 Dynamic Forms So zeigen Sie ein Feld basierend auf den Werten eines anderen

Question

an/verbergen Umgebung: Angular 2 RC 4, Typescript.

Ich habe eine Implementierung von Dynamic Angular forms. Ich habe 4 Felder total - dob, E-Mail, Frage und Antwort

Fragen:

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

Ausschnitt aus der html von Haupt-/Stammkomponente

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

dynamisch-Form Komponente

<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-Frage Komponente

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

Hier ist mein 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 

Alle Ideen, wie kann diese dynamische Formulare mit acheived werden?

Ich denke, ich kann Irgendwie ein Ereignis nach dob, E-Mail füllen, rufen Sie das Back-End und bekommen die Frage. Verwenden Sie eine Variable, um Questionio zu verbergen/anzuzeigen und basierend auf dem Erfolg/Fehlschlag der obigen Antwort zu antworten?

Wenn dies ein guter Ansatz ist, wie kann ich spüren, dass der Benutzer die ersten beiden Felder ausgefüllt hat und den Back-End-Anruf tätigen. Wie kann ich das Fragefeld (speziell mit dynamischen Formularen) nach Erhalt der Serverresonanz aktualisieren?

Wenn nicht, gibt es einen einfacheren Weg, dies zu tun?

Answer 1

Ich weiß, das ist eine verzögerte Antwort, aber ich denke, im Wesentlichen this Scotch.io post deckt die Grundlagen, was Sie tun müssen.

Sie erstellen eine Formulargruppe und tauschen die Validierungen basierend auf dem Wert eines Felds aus. In der Ansicht blenden Sie die Felder aus, die Sie mit ngIfs deaktiviert haben.