Angulaire: Afficher les entrées sur le formulaire en fonction de la sélection ou de la saisie précédente

Question

J'utilise le référentiel de clarté de VMware et j'essaie de créer un formulaire de saisie qui demande des informations connexes supplémentaires. Par exemple, le formulaire a une sélection de liste déroulante pour le type d'authentification. Selon le type, j'ai besoin de plus d'informations et cette information est spécifique au type. "None" auth n'a pas besoin de plus d'informations. "Basic" nécessite un combo utilisateur et mot de passe alors que "OAuth" veut un jeton API.

J'ai essayé d'utiliser ng-switch sans la moindre chance - le texte s'affiche pour les deux options malgré la sélection (j'utilise juste le texte pour l'instant et ajouterai les détails de sous-formulaire plus tard). Je suppose que mon utilisation des champs de formulaire est erronée, mais je ne peux pas comprendre pourquoi et comment.

<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

Vous pouvez utiliser la nouvelle syntaxe pour *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

Si vous avez plus de deux valeurs, vous pouvez toujours utiliser ngSwitch:

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

Docs