ngx-formly密码可见性切换

时间:2019-11-29 13:33:04

标签: angular angular-forms angular-formly

我该如何使用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'
      }
    }
  ],
}
];

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

谢谢

0 个答案:

没有答案