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>

秀场=假；在 .ts 文件中设置

原文由 Ayush Singh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

selectedValue: string = '';

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

此外，选项需要 value attribute 并且需要将值存储在 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>

原文由 Sravan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以这样做

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

原文由 user4676340 发布，翻译遵循 CC BY-SA 3.0 许可协议