javascript - 如何将输入字段类型 ="password"转换为 Angular 类型 ="text"？

Question

您能告诉我如何将输入字段 type="password"转换为 Angular 中的 type="text"吗？在我的演示中，我有两个输入字段手机号码和重新输入手机号码我希望如果用户输入相同的10数字，那么它将 type="password"转换为 type="文本”

示例:如果您输入手机号码 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 中会怎么做

Answer 1

只需将输入类型属性绑定(bind)到 cfForm.valid bool 值即可。

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

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

参见Stackblitz