根据下拉列表Angular TypeScript中的选定值显示表单字段

Question

我想根据表单下拉列表中的选定值显示表单字段。

例如，如果下拉列表中选择的元素是"first"，我希望表单不会更改。

另一方面，如果我在下拉列表中选择元素"两个"，我希望它显示输入"出现">

这是我目前的代码

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>

TypeScript：

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

提前感谢您的帮助。

美丽的一天，

谨致问候，Valentin

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教程。从长远来看，堆栈溢出将没有帮助。

Answer 2

您可以在html中使用一个角度if条件，它被称为*ngIf。

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

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