如何在Angular中使用ngx-formly实现带密码可见切换的表单？

1. 创建自定义密码输入组件 #

生成并实现带眼睛切换图标的密码输入组件，继承ngx-formly的FieldType以适配表单逻辑：

import { Component } from '@angular/core';
import { FieldType, FieldTypeConfig } from '@ngx-formly/core';

@Component({
  selector: 'formly-password-type',
  template: `
    <div class="relative">
      <input
        [type]="showPassword ? 'text' : 'password'"
        [formControl]="formControl"
        [formlyAttributes]="field"
        class="w-full pr-10 border rounded px-3 py-2"
      />
      <button
        type="button"
        class="absolute right-3 top-1/2 -translate-y-1/2 bg-transparent border-none cursor-pointer"
        (click)="showPassword = !showPassword"
        aria-label="{{ showPassword ? '隐藏密码' : '显示密码' }}"
      >
        <svg *ngIf="!showPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
        <svg *ngIf="showPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c4.756 0 8.773-3.162 10.066-7.5a10.503 10.503 0 00-2.048-6.277m-4.962 10.401a5.151 5.151 0 00-2.233-.656m2.229 5.569a5.151 5.151 0 002.233-.656m-9.35 0h3.086m-3.086 0l3.455-3.455m0 0l3.455 3.455m-3.455 0L9.022 9.022" />
        </svg>
      </button>
    </div>
  `,
})
export class FormlyPasswordTypeComponent extends FieldType<FieldTypeConfig> {
  showPassword = false;
}

2. 注册自定义组件到Formly模块 #

在你的功能模块（如LoginModule）中，将自定义密码类型注册到ngx-formly的配置中：

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap'; // 若用Material则替换为FormlyMaterialModule
import { FormlyPasswordTypeComponent } from './formly-password-type.component';
import { LoginComponent } from './login.component';

@NgModule({
  imports: [
    ReactiveFormsModule,
    FormlyBootstrapModule,
    FormlyModule.forRoot({
      types: [
        { name: 'password', component: FormlyPasswordTypeComponent },
      ],
    }),
  ],
  declarations: [FormlyPasswordTypeComponent, LoginComponent],
  exports: [LoginComponent]
})
export class LoginModule {}

3. 构建登录表单组件 #

定义表单的模型、字段配置和提交逻辑：

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'app-login',
  template: `
    <div class="max-w-md mx-auto mt-8 p-4 border rounded">
      <form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-4">
        <formly-form
          [form]="form"
          [fields]="fields"
          [model]="model"
        ></formly-form>
        <button type="submit" class="w-full bg-blue-500 text-white py-2 rounded" [disabled]="!form.valid">登录</button>
      </form>
    </div>
  `,
})
export class LoginComponent {
  form = new FormGroup({});
  model: any = {};
  fields: FormlyFieldConfig[] = [
    {
      key: 'username',
      type: 'input',
      props: {
        label: '邮箱/用户名',
        placeholder: '请输入邮箱或用户名',
        required: true,
        type: 'text',
      },
    },
    {
      key: 'password',
      type: 'password', // 使用自定义密码类型
      props: {
        label: '密码',
        placeholder: '请输入密码',
        required: true,
      },
    },
  ];

  onSubmit() {
    if (this.form.valid) {
      console.log('提交数据:', this.model);
      // 此处添加登录请求逻辑
    }
  }
}

4. 样式说明 #

示例中使用了基础的内联样式和Tailwind类，你可以根据项目的UI规范替换为自定义CSS类，核心是保证密码输入框容器为相对定位，切换按钮为绝对定位以实现图标悬浮效果。

内容的提问来源于stack exchange，提问作者Vishal Rikhi