web-dev-qa-db-ja.com

Angular2-入力タイプを動的に変更することはできません

フォームの入力タイプを動的に変更できない理由を誰かが説明できるかどうか疑問に思っていましたか？

例：.

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

動作しません。

しかし、これは機能します、

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

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() {

    }
}

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ディレクティブがトリガーされないことです。タイプをパスワードに直接設定すると、トリガーされます。

入力タイプを動的に変更する別の方法はありますか？

angularinputangular2-formsangular-formsform-control
4
ymrs

これを試して

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

これを見てください

angular 2で入力フィールドタイプを動的に生成し、フィールドのタイプを設定します

12
Ramesh Rajendran

あなたはこの方法を好むことができます。ほとんどの場合動作します：

<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';
  }
2
Anas

TypeScriptからこれを処理することをお勧めします

type: string;

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

およびHTMLで

<user-input type={{type}}></user-input>
0
Hrishikesh Kale