如何基于ngx-formly实现旧密码可见性切换功能？

Hey there! 针对你的密码可见性切换需求，其实不需要单独创建独立的复选框字段，我们可以把切换控件直接整合到旧密码的输入框组件中，这样既简洁又符合表单的布局逻辑。下面给你两种实用的实现方式：

方式一：直接使用自定义模板快速实现 #

这种方法适合只需要给单个密码字段添加切换功能的场景，直接修改oldPassword的字段配置即可：

{
  className: 'flex-1',
  key: 'oldPassword',
  type: 'template',
  template: `
    <div class="password-input-group" style="display: flex; align-items: center; gap: 8px;">
      <input 
        [formControl]="formControl"
        [formlyAttributes]="field"
        [type]="field.templateOptions.hidePassword ? 'password' : 'text'"
        placeholder="Old Password"
        autocomplete="new-username"
        appearance="outline"
        style="flex: 1;"
      />
      <label style="display: flex; align-items: center; gap: 4px;">
        <input 
          type="checkbox" 
          [(ngModel)]="field.templateOptions.hidePassword" 
          [ngModelOptions]="{standalone: true}"
        />
        Show Password
      </label>
    </div>
  `,
  templateOptions: {
    required: true,
    hidePassword: true, // 初始状态隐藏密码
    attributes: { autocomplete: 'new-username' },
    appearance: 'outline'
  },
}

关键说明： #

• 用template类型替代原来的input，把输入框和复选框放在同一个容器里
• 通过field.templateOptions.hidePassword变量控制输入框的type属性
• 复选框使用standalone: true的ngModel，不会干扰表单的FormControl和模型结构

方式二：自定义可复用的密码切换字段类型 #

如果你的表单中有多个密码字段需要添加切换功能，推荐自定义一个可复用的字段类型，后续可以直接在任何密码字段中使用：

1. 创建自定义字段组件 #

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

@Component({
  selector: 'formly-field-password-toggle',
  template: `
    <div class="password-input-group" style="display: flex; align-items: center; gap: 8px;">
      <input 
        type="{{ to.hidePassword ? 'password' : 'text' }}"
        [formControl]="formControl"
        [formlyAttributes]="field"
        style="flex: 1;"
      />
      <button 
        type="button" 
        (click)="to.hidePassword = !to.hidePassword"
        style="padding: 0 12px;"
      >
        {{ to.hidePassword ? '👁️ Show' : '🙈 Hide' }}
      </button>
    </div>
  `,
})
export class FormlyFieldPasswordToggle extends FieldType<FieldTypeConfig> {
  // 设置默认配置
  defaultOptions = {
    templateOptions: {
      hidePassword: true,
    },
  };
}

2. 在模块中注册自定义类型 #

import { NgModule } from '@angular/core';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyFieldPasswordToggle } from './password-toggle.type';

@NgModule({
  imports: [
    FormlyModule.forRoot({
      types: [
        { name: 'password-toggle', component: FormlyFieldPasswordToggle },
      ],
    }),
  ],
  declarations: [FormlyFieldPasswordToggle],
})
export class AppModule {}

3. 在表单配置中使用 #

{
  className: 'flex-1',
  key: 'oldPassword',
  type: 'password-toggle', // 使用自定义字段类型
  templateOptions: {
    attributes: { autocomplete: 'new-username' },
    placeholder: 'Old Password',
    required: true,
    appearance: 'outline',
    // 可按需覆盖默认的hidePassword值
    // hidePassword: false
  },
}

总结回答你的疑问 #

你不需要单独创建复选框字段，将切换控件整合到密码输入框的同一个字段配置中是更合理的选择——因为切换功能属于密码输入框的附属交互，这样既能保持表单结构清晰，也不会额外增加表单模型的复杂度。

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