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

【问题标题】：Angular2 - cannot change input type dynamicallyAngular2 - 无法动态更改输入类型
【发布时间】：2018-09-12 08:20:33
【问题描述】：

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

例如

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

没用。

但这行得通，

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

用户输入.ts

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

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

    @Input()
    public isActive: boolean;

    constructor() {

    }
}

用户输入.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();
        }
    }
}

我遇到的问题是，当我动态设置类型时，不会触发用户输入密码指令。如果我直接将类型设置为密码，那么它会被触发。

还有其他方法可以动态更改输入类型吗？

【问题讨论】：

我认为这是一个真正的问题。看到这个 - github.com/angular/angular/issues/…
user-input 是自定义指令吗？你能显示它的相关代码吗？
它适用于标签。用户输入是自定义指令吗？请告诉我们您在使用<user-input type="{{ isActive ? 'password' : 'text' }}"></user-input>时遇到了什么错误
另一种解决方案是编写一个函数来设置值并像 [type]="functionName()" 一样调用它

标签： angular input angular2-forms angular-forms form-control

【解决方案1】：

试试这个

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

请看这个

Dynamically generate input field type with angular 2 and set the type of the field

【讨论】：

也不起作用。

【解决方案2】：

您可以选择这种方式。大部分时间都在工作：

<user-input #input type="password" ></user-input>
<button (click)="changeInput(input)">Change input</button>

ts 文件

changeInput(input: any): any {
    input.type = input.type === 'password' ? 'text' : 'password';
  }

【讨论】：

我希望他想在默认加载时更改类型。
@Anas Bin Nazeer，不幸的是我在页面上没有按钮来执行此操作。我希望能够在加载时更改类型。

【解决方案3】：

我会建议像

这样的打字稿来处理这个

type: string;

functiontochangetype(){
if(your condtion ){
this.type="password";
}else{
this.type="text"
}
}

在 HTML 中

<user-input type={{type}}></user-input>

【讨论】：

【解决方案4】：

我正在循环遍历具有多个键值对的对象并动态显示“标签”和“值”（在这里，我无法确定哪个键将是 "password"）。因此，我使用了属性绑定 [type] 而不是 type 属性，这最终对我有用。

这是我的代码

<div class="form-group row" *ngFor="let item of allItemsObject | keyvalue">
    <label for={{item.key}} class="col-sm-5 col-form-label">{{item.key | uppercase}}</label>
    <div class="col-sm-7">
        <input [type]="item?.key==='password'?'password':'text'" class="form-control" id={{item.key}} value={{item.value}} />
    </div>
</div>

这可以帮助两个查询，一个想知道如何遍历对象以动态打印键值的查询，然后是如何动态更新"type" property value of <input/> tag

希望这会有所帮助。谢谢！

【讨论】：