如何将输入字段类型=“密码”转换为角度类型=“文本”？答案

【问题标题】：How to convert input field type="password" to type="text" in angular?如何将输入字段类型=“密码”转换为角度类型=“文本”？
【发布时间】：2018-08-22 10:42:26
【问题描述】：

您能告诉我如何将输入字段 type="password" 转换为 type="text" in angular 。在我的演示中，我有两个输入字段 Mobile no 和 Re-enter mobile number 我想如果用户同时输入相同的 10 数字，那么它将 type="password" 转换为 type="text"

示例：如果您输入手机号码9891234567 并重新输入密码9891234567，则这两个字段都转换为 type="text"。我们可以在 Angular 中实现这一点吗？

这是我的代码 https://stackblitz.com/edit/angular-jfqkfo?file=src%2Fapp%2Fapp.component.ts

import { Component } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    cfForm: FormGroup;

  constructor(private fb: FormBuilder){
     this.cfForm = this.fb.group({
      mobile_no: ['', [Validators.required, Validators.pattern('^[0-9]{10}$')]],
        re_mobile_no: ['', [Validators.required, Validators.pattern('^[0-9]{10}$')]],

    });
  }
}

我可以在 jQuery 中使用 $('id').attr('type','text') ；但是我将如何使用 Angular

【问题讨论】：

我需要用角度来做这个
您是否检查过 Stack Overflow 中有关在 Angular 中动态更改输入类型的几个问题？你试过什么？目前，我没有看到任何尝试和一堆可能的重复问题。

标签： javascript angular

【解决方案1】：

只需将输入类型属性绑定到 cfForm.valid 布尔值即可。

<input [type]="cfForm.valid ? 'text' : 'password'" />

然后，您的组件中的逻辑会将值从 false 更改为 true，并且输入类型将更改。

见Stackblitz

【讨论】：

这已经有几年的历史了，但它的简单性非常出色，并在十秒钟内解决了我的问题。谢谢。

【解决方案2】：

This should work for you : 监听表单值的变化，如果值匹配，改变输入的类型

this.cfForm.valueChanges.subscribe(value => {
  if (value.mobile_no === value.re_mobile_no) {
    this.inputType = 'text';
  } else {
    this.inputType = 'password';
  }
});

<input NumbersOnly="true" [type]="inputType" placeholder="Enter Mobile no" formControlName="mobile_no" maxlength="10">

【讨论】：

【解决方案3】：

您可以创建一个 keyup 事件处理程序，如果 bthe 值在两种情况下都匹配，则将 type 从密码更改为 text

HTML

<form novalidate>
  <input type="text" (keyup)="checkEquality(ipField.value,passField.value)" #ipField>
  <input [type]="ipType" (keyup)="checkEquality(ipField.value,passField.value)" #passField>
</form>

组件

export class AppComponent {
  name = 'Angular';
  ipType = ''
  checkEquality(inField, passField) {
    if (inField === passField) {
      this.ipType = "text"
    }
    else {
      this.ipType = "password"
    }
  }
}

这里是DEMO

【讨论】：

【解决方案4】：

你可以试试[type]

我在Stackblitz上创建了演示

<input NumbersOnly="true" [type]="cfForm.get('mobile_no').value.length==10 && cfForm.get('mobile_no').value==cfForm.get('re_mobile_no').value ? 'text' : 'password'" placeholder="Enter Mobile no" formControlName="mobile_no" maxlength="10">

【讨论】：

【解决方案5】：

新属性：

formType = '密码'

然后将html输入类型改为=

type= {{formType}}

在构造函数中，现在是

constructor(private fb: FormBuilder){
 this.cfForm = this.fb.group({
  mobile_no: ['', [Validators.required, Validators.pattern('^[0-9]{10}$')]],
  re_mobile_no: ['', [Validators.required, Validators.pattern('^[0-9]{10}$')]],
});
// Add the validator
this.cfForm.setValidators(this.checkIfEqual())

}

验证值是否匹配的新方法

public checkIfEqual() : ValidatorFn{
 return (group: FormGroup): ValidationErrors  =>   {
      const control1 = group.controls['mobile_no'];
      const control2 = group.controls['re_mobile_no'];
      if(control1.value == control2.value){
        this.formType = 'text';
      } else{
        this.formType = 'password'
      }
      return;
};

}

应该都可以！

【讨论】：