角2の動的フォーム他の値に基づいてフィールドを表示/非表示にする方法

Question

環境：角度2 RC 4、Typescript。

私はDynamic Angular formsの実装を持っています。 /メインの親コンポーネントのHTMLの

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

スニペット

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

ダイナミックフォームコンポーネント

：DOB、電子メール、質問と回答

質問 - 私は合計4分野を持っています

<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-質問構成要素

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

は、ここに私のワークフロー

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 

これは、動的フォームを使用してacheivedすることができる方法上の任意のアイデアですか？

私はできると思います 何とかdobの後にイベントを投げ、電子メールがいっぱいになり、バックエンドに電話して質問を受け取ります。 変数を使用してquestnioを表示/非表示し、上記の応答の成功/失敗に基づいて答えますか？

これは良いアプローチである場合、ユーザーが最初の2つのフィールドに入力してバックエンド呼び出しを行ったことをどのように感じることができますか。サーバーの共振を受けた後、質問フィールド（特に動的フォームを使用）を更新するにはどうすればよいですか？

これを行う簡単な方法がない場合は、

Answer 1

私はこれが遅れた答えであることを知っていますが、私は本質的にthis Scotch.io postがあなたがしなければならないことの基礎をカバーしていると思います。

フォームグループを作成し、フィールドの値に基づいてバリデーションをスワップアウトします。ビューでは、ngIfsを使用して無効にしたフィールドを非表示にします。