html - Angular - 如何显示基于下拉选项的输入

Question

我希望在下拉菜单中选择“其他”选项时显示输入字段，但不知道如何-

这是我的代码

   <div class="form-group">
      <label for="college">College:</label>
      <select class="form-control" id="college" ngModel name="college_name" required>
        <option>Ajay Kumar Garg Engineering College</option>
        <option>Others- Please Specify Below</option>
      </select>
    </div>
    <div class="form-group" *ngIf="showfield">
      <label for="name">Enter College Name:</label>
      <input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
    </div>

showfield = false;在.ts文件中设置

Answer 1

在你的组件中取一个变量，

selectedValue: string = '';

只需将 selectedvalue 分配给 ngModel 并使用该值来显示文本字段。

另外，options需要value属性并且需要value来存储在ngModel

<div class="form-group">
      <label for="college">College:</label>
      <select class="form-control" id="college" [(ngModel)]="selectedValue" name="college_name" required>
        <option value="college">Ajay Kumar Garg Engineering College</option>
        <option value="others">Others- Please Specify Below</option>
      </select>
 </div>
    <div class="form-group" *ngIf="selectedValue == 'others'">
      <label for="name">Enter College Name:</label>
      <input type="text" class="form-control" id="name" ngModel name="other_college_name" required>
    </div>