Question

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

示例：如果您输入手机号码9891234567，然后重新输入密码9891234567，则两个字段都将变为“ =“文本”。我们可以在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}$')]],

    });
  }
}

我可以使用 $（'id'）。attr（'type'，'text'）在jQuery中进行操作；但是我将如何在Angular中做

Answer 1

您可以尝试使用[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">

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

Answer 3

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

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

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

请参见Stackblitz

Answer 4

您可以创建一个keyup事件处理程序，如果b值在两种情况下都匹配，则将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

Answer 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;
};

}

应该一切正常！

如何将输入字段type =“ password”转换为angular的type =“ text”？

5 个答案: