首页 文章

使用Angular 2 / Ionic 2将输入类型=“tel”更改为密码字段

提问于
浏览 次
1

我想使用Angular 2 / Ionic 2将输入类型 tel 更改为 password 字段 .

我有一个引脚号字段，它将输入数字作为输入，我想在按键事件触发后将数字更改为密码字段 .

我尝试了以下方式，但输入第一个数字后 keypad 正在关闭 .

import { Component, Directive, HostListener } from '@angular/core';

  @Directive({
      selector: '.inputmask'
    })    
    export class MyDirective {
       @HostListener('document:keyup', ['$event.target'])
        onFocus(target) {
          target.type = 'password';
        }
        /*@HostListener('focusout', ['$event.target'])
        onFocusout(target) {
          target.type = 'tel';
        }*/
    }

我的模板：

<ion-input type="tel" [formControl]="aadhaarno" class="inputmask">
angular ionic2 angular2-template angular2-forms

1 回答

  • 0

    这似乎是 ViewChild 的完美用法 . 它可用于从组件中的DOM引用HTML元素，以便您可以更改它 . 首先，您需要将模板变量添加到输入元素，该元素将用于引用它：

    <ion-input #myInput type="tel" [formControl]="aadhaarno" class="inputmask">

    然后在您的组件中，您必须导入 ViewChild 并使用它来获取DOM中输入元素的引用：

    import { ViewChild } from '@angular/core';

@ViewChild('myInput')
myInput: any;

    然后你创建一个函数，它将使用 myInput 变量（它现在引用了输入）将其类型更改为 password 并在某处调用它：

    changeInput() {
this.myInput.nativeElement.type = "password";
}

    这是working Plunker .

    回复于

相关问题