Angular2-无法动态更改输入类型

Question

我想知道是否有人可以帮助解释为什么我无法动态更改表单输入类型？

例如

<user-input type="{{ isActive ? 'password' : 'text' }}"></user-input>

不起作用。

但这有效

<user-input type="password" *ngIf="isActive"></user-input>
<user-input type="text" *ngIf="!isActive"></user-input>

用户输入

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

@Component({
    selector: 'user-input',
    templateUrl: './user-input.html'
})
export class UserInput {

    @Input()
    public isActive: boolean;

    constructor() {

    }
}

user-input.html

<input 
    type="{{ isActive ? 'password' : 'text' }}" 
    class="form-control"
    [(ngModel)]="value"
/>

user-input-password.ts

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

@Directive({
  selector:
      'input[type=password][formControlName],input[type=password][formControl],input[type=password][ngModel]'
})
export class PasswordValueAccessor {

    public pattern: RegExp;

    private regexMap = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;

    @HostListener('keypress', ['$event']) 
    public onKeyPress (e: any)
    {
        this.pattern = this.regexMap;
        const inputChar = e.key;

        if (this.pattern.test(inputChar)) {
            // success
        } else {
            e.preventDefault();
        }
    }
}

我的问题是，当我动态设置类型时，不会触发user-input-password指令。如果我直接将类型设置为密码，那么它将触发。

还有另一种动态更改输入类型的方法吗？

Answer 1

尝试这个

<user-input [type]="isActive ? 'password' : 'text'"></user-input>

请看看这个

动态生成角度为2的输入字段类型并设置字段类型