Angular - How to show an input based on Dropdown option

Question

I wish to show the input field when "Others" option is selected on dropdown, but can't figure out how to-

Here is my code

   <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; is set in .ts file

@D.Simon You got me wrong, My purpose is to set that automatically based on option selection — Ayush Singh
– Ayush Singh, Commented Sep 6, 2017 at 11:35

Sravan · Accepted Answer · 2017-09-06 11:38:56Z

12

In your component take a variable,

selectedValue: string = '';

Just assign selectedvalue to ngModel and use that value to display text field.

Also, options needs value attribute and it needs value to store in 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>

edited Sep 6, 2017 at 11:38

answered Sep 6, 2017 at 11:33

Sravan

18.7k3 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Wesley Coetzee Over a year ago

just a note, you will need to create the variable selectedValue inside the *.component.ts file.

Sravan Over a year ago

yes thats obviously needed, let me add that to be more precise.

Wesley Coetzee Over a year ago

Yup, just mentioning it because the OP didn't know about [(ngModel)], just covering all the bases :)

user4676340 Over a year ago

Actually you don't need to. You can bind a variable to ngModel and use it only in the HTML ! I often do that with checkboxes.

user4676340 Over a year ago

@Sravan never said otherwise. I'm just stating the fact that you don't need to do so.

|

user4676340 · Accepted Answer · 2017-09-06 11:35:14Z

4

You can do like so

   <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>

answered Sep 6, 2017 at 11:35

user4676340

2 Comments

Ayush Singh Over a year ago

Thanks! Worked like a charm

user4676340 Over a year ago

No problem, mark at least one of the answers as resolved !

Vishal · Accepted Answer · 2017-09-06 11:35:29Z

Your options must have a value associated with them, the selected options value will get set to the model associated with your dropdown select. You can check that for show/hide as follows:

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

Collectives™ on Stack Overflow

Angular - How to show an input based on Dropdown option

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related