Show/Hide div element using drop down menu in Angular?

Question

I am new in Angular. I want to show/hide the file div using drop down (Select) menu.If I choose "custom", it will show File element. But I choose "none", it will hide as well as remove the file (if any) element. I am unable to show the hidden file element. Please provide some feedback?

<div class="form-group">
  <label for="credentials">Credentials</label><br />
  <select name="select_file" class="form-control" required ng-model="myVar">
    <option value="">Choose a option</option>
    <option value="false">none</option>
    <option value="true">custom</option>
  </select>
  <div *ngIf="myVar">
    <input
      type="file"
      class="form-control"
      id="credentials"
      accept=".json"
      [(ngModel)]="userdata.credentials"
      (change)="handleFileInput($event.target.files)"
      name="credentials"
    />
  </div>
</div>

Roman Leliuk · Accepted Answer · 2020-05-19 08:30:56Z

1

First of all it's not a Angular JS, it's looks like Angular 2+. About your problem:

[value]="..." only supports string values
[ngValue]="..." supports any type, including boolean

e.g.

<h1>My Application</h1>
<select [(ngModel)]="myVar">
  <option [ngValue]="''">Choose a option</option>
  <option [ngValue]="false">none</option>
  <option [ngValue]="true">custom</option>
</select>

Also try to use Reactive Forms instead of ngModel

answered May 19, 2020 at 8:30

Roman Leliuk

918 bronze badges

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

Comments

Arjun · Accepted Answer · 2020-05-19 08:32:07Z

0

    <div class="form-group">
  <label for="credentials">Credentials</label><br/>
  <select name="select_file" class="form-control" required [(ngModel)]="myVar">
    <option value="">Choose a option</option>
    <option value="false">none</option>
    <option value="true">custom</option>
</select>
<div *ngIf="myVar === true">
    <input 
    type="file" 
    class="form-control" 
    id="credentials" 
    accept=".json"
    [(ngModel)]="userdata.credentials"
    (change)="handleFileInput($event.target.files)"
    name="credentials" 
    >
  </div>

You need to use ngModel . In Ts file, just define myVar variable.Please try this code.

answered May 19, 2020 at 8:32

Arjun

1,34217 silver badges26 bronze badges

4 Comments

Dr. Yatish Bathla Over a year ago

Your answer is correct. But value is replaced by [ngValue] as it supports any type, including boolean.

Arjun Over a year ago

@YatishBathla You are right, value is always a string. But in our case, I guess it will not cause any issue. Because in div we have if condition of myVar === true .So it will not allow empty string also. Only value true will get allowed

Dr. Yatish Bathla Over a year ago

I have tried with value but then file div is not visible when i clicked on custom option.

Arjun Over a year ago

Oh okay, sorry my mistake. I forgot to do a quote. Try this *ngIf=" myVar === 'true' " .

Collectives™ on Stack Overflow

Show/Hide div element using drop down menu in Angular?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related