Forms 角度：根据以前的选择或输入在窗体上显示输入

我正在使用VMware的clarity seed repo，并尝试构建一个输入表单，提示您输入其他相关信息。例如，表单具有用于身份验证类型的下拉列表选择。根据类型，我可能需要更多信息，这些信息是特定于该类型的。“无”身份验证不需要更多信息。“Basic”需要用户和密码组合，而“OAuth”需要API令牌

我尝试使用ng开关，但没有成功-尽管选择了，但两个选项都显示了文本（我现在只使用文本，稍后将添加子表单详细信息）

我认为我对表单字段的使用在某种程度上是错误的，但我不知道原因和方式

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

新端点
名称
描述
统一资源定位地址
认证
没有一个
基本的
非统组织
基本凭证集的另一种形式
OAuth令牌的另一种形式
提交

---

您可以使用

*ngIf-then的新语法；否则

：

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

基本凭证集的另一种形式
OAuth令牌的另一种形式

如果有两个以上的值，仍然可以使用ngSwitch：

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

...
...
...

---

谢谢，非常有帮助。第二种情况是我希望使用的。然而，当我为*ngIf示例复制您的代码时，双引号的位置出现了一些问题-我不确定这是否是有意的，但当我编辑并删除了#auth后面的双引号，并在Basic后面放置了一个引号时，我的IDE更开心了！