角度：以前の選択または入力に基づいてフォームに入力を表示

Question

VMwareの明瞭度シードレポを使用していますが、追加の関連情報の入力を求める入力フォームを作成しようとしています。たとえば、フォームには認証タイプのプルダウンリスト選択があります。タイプによっては、より多くの情報が必要な場合があり、そのタイプに固有の情報です。 「なし」認証にはこれ以上の情報は必要ありません。 "Basic"は、 "OAuth"がAPIトークンを要求している間にユーザーとパスワードの組み合わせを必要とします。

ng-switchを使用してみましたが、これは選択にもかかわらず、両方のオプションにテキストが表示されています（今はテキストを使用していて、後でサブフォームの詳細を追加します）。

私はフォームフィールドの私の使用はどういうわけか間違っていますが、私は理由と方法を理解できません。

<form> 
<section class="form-block"> 
    <span>New Endpoint</span> 
    <div class="form-group"> 
     <label for="endpoint.name" class="required">Name</label> 
     <input type="text" id="endpoint.name" size="45"> 
    </div> 
    <div class="form-group"> 
     <label for="endpoint.id">Description</label> 
     <input type="text" id="endpoint.id" size="45"> 
    </div> 
    <div class="form-group"> 
     <label for="endpoint.url" class="required">URL</label> 
     <input type="url" id="endpoint.url" placeholder="http://endpoint.co/api" size="35"> 
    </div> 
    <div class="form-group"> 
     <label for="endpoint.authType">Authentication</label> 
     <div class="select" class="required"> 
      <select id="endpoint.authType"> 
       <option>None</option> 
       <option>Basic</option> 
       <option>OAuth</option> 
      </select> 
     </div> 
    </div> 
    <div ng-switch="endpoint.authType"> 
     <div ng-switch-when="Basic"> 
      <h1>Another form for Basic credential set</h1> 
     </div> 
     <div ng-switch-when="OAuth"> 
      <h1>Another form for OAuth token</h1> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-primary">Submit</button> 
</section> 

Answer 1

あなたは*ngIf - then ;elseのための新しい構文を使用することができます。

<div *ngIf="endpoint.authType === 'Basic'"; then basic; else auth> 
     <ng-template #basic> 
      <h1>Another form for Basic credential set</h1> 
     </ng-template> 
     <ng-template #auth> 
      <h1>Another form for OAuth token</h1> 
     </ng-template> 
</div> 

Docs

あなたは以上の2つの値を持っている場合、あなたはまだngSwitchを使用することができます。

<div [ngSwitch]="conditionExpression"> 
    <ng-template [ngSwitchCase]="case1Exp">...</ng-template> 
    <ng-template ngSwitchCase="case2LiteralString">...</ng-template> 
    <ng-template ngSwitchDefault>...</ng-template> 
</div> 

Docs