How to change visibility of a input field in Aurelia?

Question

I have following form in Aurelia. In the top of the form, there's a drop down menu to select user type. There are only two options. I need to show and hide some input fields when user change the type.

IE : When user select type as 'Producer', I need to hide username. When user select 'Writer' , I need to show username and also hide email address. Like this. Need to do this using JavaScript controller.

https://gist.github.com/chanakaDe/75934983cb4a02a7a8914959e38bf0f3

This is the HTML code as a github gist. Please give me a solution for this.

Answer 1

You can use show.bind (if you just want to show and hide the element), or if.bind (if you want to add and remove it form the DOM). For instance:

<div class="form-group" id="div_username" if.bind="user_type === 'writer'">
  <label for="userame">Username:</label>
  <input type="text" class="form-control" id="userame" value.bind="userame" placeholder="Userame">
</div>

Runnable example https://gist.run/?id=33db6b8f919eb95d63b8bfbc2e912fe5 - Change the User Type to 'writer' and you'll see the Username input.