CODEWITHSUNDEEP
javascripthtmlcssangular
Dr. Yatish Bathla
Dr. Yatish Bathla

Reputation: 522

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

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>

Upvotes: 0

Views: 1870

Answers (2)

Arjun
Arjun

Reputation: 1342

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

Upvotes: 0

Roman Leliuk
Roman Leliuk

Reputation: 91

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

Upvotes: 1

Related Questions