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

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

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

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

有关创建自定义模板的更多信息可在此处找到：Creating a Custom Template