2

Currently I have the following Input field:

  `<h5>Answer</h5><span><a href="#" (click)="plainText(answer.value)">(show)
<input type="text" #answer (keyup)="asterisk(answer.value)" class="vg-form-control" placeholder="**********">`

I would like to convert the users text into asterisks as they are typing. So an input of test should look like **** on the UI.

Also, is it possible to reverse this with the "show" href tag?

Kevin Alwell
  • 131
  • 10
  • This is a bit more complicated but the basic idea can be used for your use case as well. It requires that you use `ngModel` to bind the `input` to a property http://stackoverflow.com/questions/37800841/input-mask-fields-in-angular2-forms/37887432#37887432 – Günter Zöchbauer Jun 28 '16 at 06:41

1 Answers1

4

Though you won't get aterisks, the easiest way would be to use the input type as password. This allows you to keep the information of what is displayed but show dots or asterisks, depending on the client's browser. Also that way you can simply bind to whatever value is typed into the answer box.

  <input [type]="type" [(ngModel)]="answer">
  <button (click)="type = (type === 'password') ? 'text' : 'password'">Show</button>

Here it is in action

Jarod Moser
  • 7,022
  • 2
  • 24
  • 52