Question

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

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

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

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

Answer 1

这似乎是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。

更改输入类型=＆＃34; tel＆＃34;到使用Angular 2 / Ionic 2的密码字段

1 个答案: