ngx-formly 密码可见性切换

Question

我将如何使用 ngx-formly 实现密码可见性切换？

我的模型有

fields: FormlyFieldConfig[] = [
{
  template: '<div><strong>Old Password:</strong></div>',
},
{
  className: 'flex-1',
  key: 'oldPassword',
  type: 'input',
  templateOptions: {
    attributes: {
      autocomplete: 'new-username',
    },
    type: 'password',
    // label: 'Old Password',
    placeholder: 'Old Password',
    required: true,
    appearance: 'outline'
  },
},
{
  template: '<div class="mtlg"><strong>New Password:</strong></div>',
},
{
  key: 'updatedPassword',
  validators: {
    fieldMatch: {
      expression: (control) => {
        const value = control.value;
        return value.passwordConfirm === value.newPassword
          // avoid displaying the message error when values are empty
          || (!value.passwordConfirm || !value.newPassword);
      },
      message: 'Passwords do not match',
      errorPath: 'passwordConfirm',
    },
  },
  fieldGroupClassName: 'display-flex',
  fieldGroup: [
    {
      className: 'flex-2',
      key: 'newPassword',
      type: 'input',
      templateOptions: {
        type: 'password',
        // label: 'Password',
        placeholder: 'Must be at least 5 characters',
        required: true,
        minLength: 5,
        appearance: 'outline'
      },
    },
    {
      template: '<div><strong>Confirm New Password:</strong></div>',
    },
    {
      className: 'flex-3',
      key: 'passwordConfirm',
      type: 'input',
      templateOptions: {
        type: 'password',
        // label: 'Confirm Password',
        placeholder: 'Please re-enter your new password',
        required: true,
        appearance: 'outline'
      }
    }
  ],
}
];

在旧密码中，我想添加一个复选框，如果选中，则类型将从密码更改为文本，以便输入可见。我需要创建一个单独的复选框还是有一种方法可以在旧密码的模板选项中添加一个？我查看了文档，但在示例中看不到这一点。

谢谢

Answer 1

这是我遇到相同问题时提出的解决方案。基本上，该解决方案依赖于创建自定义表单（我使用的是 Angular 材质，但也可以为您选择的 UI 框架完成），扩展 FieldType 类：

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

@Component({
selector: 'formly-password-type',
template: `
<mat-form-field
  [hideRequiredMarker]="true"
  [floatLabel]="to.floatLabel"
  [appearance]="to.appearance"
  [color]="to.color"
  [style.width]="'100%'"
  [appGreyedOut]="to.readonly">

  <mat-label *ngIf="to.label && to.hideLabel !== true">
      {{ to.label }}
      <span *ngIf="to.required && to.hideRequiredMarker !== true" class="mat-form-field-required-marker">*</span>
  </mat-label>

  <input matInput #passwordField
      [id]="id"
      type="password"
      [readonly]="to.readonly"
      [formControl]="formControl"
      [formlyAttributes]="field"
      [tabindex]="to.tabindex || 0"
      [placeholder]="to.label">


  <mat-icon matSuffix 
    class="toggle-password"
    (click)="showHidePassword()">remove_red_eye</mat-icon>

  <mat-icon matSuffix 
    *ngIf="to.description"
    class="help-tooltip" 
    matTooltip="{{to.description}}" 
    matTooltipPosition="right">help</mat-icon>

  <mat-error [id]="null">
      <formly-validation-message [field]="field"></formly-validation-message>
  </mat-error>

  <mat-hint *ngIf="to.description" [id]="null">{{ to.description }}</mat-hint>

</mat-form-field>
`,
  styles: ['.toggle-password { color: #ccc; cursor: pointer; }']
})

export class MaterialPasswordTypeComponent extends FieldType {

    @ViewChild('passwordField', {static: false}) passwordField; 

    public showHidePassword(){
        this.passwordField.nativeElement.type = this.passwordField.nativeElement.type == 'password' ? 'text' : 'password'
    }
}

这会在字段中添加一个眼睛图标，单击该图标时，会将字段的类型更改为文本，反之亦然。然后，要使用它，将此组件注册为您选择的模块，并在导入下添加以下内容：

FormlyModule.forRoot({
    types: [ 
        { name: 'password', component: MaterialPasswordTypeComponent }
    ]
})

其中component 是您之前创建的组件的类名。这将覆盖对密码字段的调用，并改为调用您的新密码组件。

更多关于创建自定义模板的信息可以在这里找到：Creating a Custom Template