How to convert input field type=“password” to type=“text” in angular?

Question

Could you please tell me how to convert input field type="password" to type="text" in angular .In my demo I have two input field Mobile no and Re-enter mobile number I want if user enter both same 10 digit then it convert type="password" to type="text"

Example: if your enter mobile number 9891234567 and re-enter password 9891234567 then both field covert to type="text". Can we achieve this in Angular?

Here is my code 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}$')]],

    });
  }
}

I am able to do in jQuery using $('id').attr('type','text') ; but how I will do in Angular

Answer 1

Just bind the input type attribute to the cfForm.valid boolean.

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

Then, the logic in your component will change the value from false to true and the input type will change.

See Stackblitz

Answer 2

you can try with [type]

I have create demo on 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 3

This should work for you : listen to form value changes, and if values match, change the type of the input

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 4

You can create a keyup event handler and if bthe value matches in both the case then chancge the type from password to 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>

Component

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

Here is DEMO

Answer 5

new property:

formType = 'password'

Then change html input type to =

type= {{formType}}

In the constructor, now it is

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

}

New Method to validate if values are matching

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

}

Should all work!