根據下拉列表中選擇的值顯示表單域 Angular TypeScript

Question

我想根據表單下拉列表中的選定值顯示表單字段。

例如，如果在下拉列表中選擇的元素是“第一個”，我希望表單不會改變。

另一方面，如果我在下拉列表中選擇元素“二”，我希望它顯示輸入“出現”

這是我目前的代碼

HTML：

<div class="div-champs">
    <p id="champs">Type
       <span id="required">*</span>
    </p>
    <div class="select-style ">
        <select [(ngModel)]="selectedOption" name="type" > 
           <option style="display:none">
           <option *ngFor="let o of options">
              {{o.name}}
           </option>
       </select>
    </div>
</div>

<p id="champs">Appears
    <input type="appears" class="form-control" name="appears" formControlName="appears">
</p>

打字稿：

   ...
private selectedOption: string;

options = [
  { name: "first", value: 1 },
  { name: "two", value: 2 }
]
  ...

預先感謝您的幫助。

美好的一天，

問候， 瓦倫丁

Answer 1

您可以將if條件設為 -

<p id="champs" *ngIf="selectedOption == 'two'">Appears
    <input type="appears" class="form-control" name="appears" formControlName="appears">
</p>

html

      <select [(ngModel)]="selectedOption" name="type" > 
           <option style="display:none">
           <option [value]="o.name" *ngFor="let o of options">
              {{o.name}}
           </option>
       </select>

工作副本在這里 - https://stackblitz.com/edit/angular-fqkfyx

注意：看起來您對 Angular 很陌生，我鼓勵您閱讀 Angular 教程。 從長遠來看，Stackoverflow 不會有幫助。

Answer 2

您可以在 html 中使用 angular if contidition，它稱為 *ngIf。

<input *ngIf="selectedOption == 'two'" type="appears" class="form-control" name="appears" formControlName="appears">

來源： https : //angular.io/api/common/NgIf