How can I dynamically create an input field if certain option is selected?

January 24, 2022

I am trying to dynamically create a new input field based on user input. Please see example it will make more sense.

If the user selects ‘HS2’, I want to create a new input field upon selecting that value. If the user were to select HS2, but change to (for example) HS1, I would want to remove that input field because it should only be present once its selected. This should be in realtime and NOT after the user clicks submit. Here is my current code:

<td pEditableColumn style="width: 70px; word-wrap: break-word;">
  <select class="form-control-sm" [disabled]="searchBeanRes.rowAllSelect" [(ngModel)]="rowData.assignToAllTaskType" [(ngModel)]="rowData.taskTypeName" (click)="taskAssign(rowData,rowData.taskTypeName)">
     <option [value]="null">--Select--</option>
     <option *ngFor="let object of rowData.taskListMap | keyvalue" [ngValue]="object.value"> {{object.value}}</option>
  </select>
</td>

I appreciate any help!! Thanks a ton. I am learning front-end web development.

>Solution :

Just use an *ngIf:

<td pEditableColumn style="width: 70px; word-wrap: break-word;">
  <select class="form-control-sm" [disabled]="searchBeanRes.rowAllSelect" [(ngModel)]="rowData.assignToAllTaskType" [(ngModel)]="rowData.taskTypeName" (click)="taskAssign(rowData,rowData.taskTypeName)">
     <option [value]="null">--Select--</option>
     <option *ngFor="let object of rowData.taskListMap | keyvalue" [ngValue]="object.value"> {{object.value}}</option>
  </select>

  <ng-container *ngIf="value == 'H2'">
    <input name="extra" [(ngModel)]="extraVariable">
  </ng-container>
</td>