1

VMware の Clarity-Seed リポジトリを使用しており、追加の関連情報を求める入力フォームを作成しようとしています。たとえば、フォームには認証タイプを選択するプルダウン リストがあります。タイプによっては、より多くの情報が必要になる場合があり、その情報はタイプに固有のものです。「なし」の認証にはこれ以上の情報は必要ありません。「基本」ではユーザーとパスワードの組み合わせが必要ですが、「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>

4

1 に答える 1

3

次の新しい構文を使用できます*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>

ドキュメント

2 つ以上の値がある場合でも、ngSwitch を使用できます。

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

ドキュメント

于 2017-09-08T20:19:52.373 に答える