ng-alain 使用 SFUISchema 呈现密码字段

Question

我正在为 angular 使用 ng-alain 框架开发一个项目。我有一个使用 sf 组件呈现表单的模式。该表单包含 4 个字段：

电子邮件
密码
姓名
姓氏

我正在尝试毫无问题地呈现上述所有字段。但是我想使用密码文本字段而不是纯文本字段

来呈现 password 属性

这是我的打字稿代码

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { SFSchema, SFUISchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { environment } from '@env/environment';

@Component({
  selector: 'app-users-user-create',
  templateUrl: './user-create.component.html'
})
export class UsersUserCreateComponent {
  i: any;
  schema: SFSchema = {
    properties: {
      name: {
        type: 'string',
        title: '',
        ui: {
          i18n: 'g.name'
        }
      },
      surname: {
        type: 'string',
        title: '',
        ui: {
          i18n: 'g.surname'
        }
      },
      email: {
        type: 'string',
        title: 'Email'
      },
      password: {
        type: 'string',
        title: '',
        ui: {
          i18n: 'g.password'
        }
      }
    },

    required: ['name', 'surname', 'email', 'password']
  };

  ui: SFUISchema = {
    '*': {
      spanLabelFixed: 100,
      grid: { span: 12 }
    },
    $name: {
      widget: 'string'
    },
    $surname: {
      widget: 'string'
    },
    $email: {
      widget: 'string'
    },
    $password: {
      widget: 'string',
      format: 'password'
    }
  };

  isLoading = false;

  constructor(private modal: NzModalRef, private msgSrv: NzMessageService, public http: HttpClient) {
  }

  async save(value: any): Promise<void> {
    const modalResult = {
      message: 'error'
    };
    // TODO - Replace notification hardcoded text with i18n version
    try {
      this.isLoading = true;
      const result = await this.http.post(`${environment.authApi.baseUrl}/auth/register`, value).toPromise();
      console.log(result);
      this.msgSrv.success('User created');
      modalResult.message = 'success';
    } catch (e) {
      console.log('shit ', e);
      const message = e?.status == 400 ? 'User with given info already exists' : 'Unknown error';
      this.msgSrv.error(message);
    } finally {
      this.isLoading = false;
      this.modal.close(modalResult);
    }
  }

  close(): void {
    this.modal.destroy();
  }
}

正如您从我的组件的 ui 属性中看到的那样，我将字段格式化为密码但没有成功

这里也是我组件对应的html


<div class="modal-header">
  <div class="modal-title">Create new user</div>
</div>

<!--<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>-->
<sf #sf mode="edit" [schema]="schema" [ui]="ui" [formData]="i" button="none">
  <div class="modal-footer">
    <button nz-button (click)="close()">{{ 'options.cancel' | i18n }}</button>
    <button nz-button type="submit" nzType="primary" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="this.isLoading"
      >{{ 'options.save' | i18n }}
    </button>
  </div>
</sf>

这是创建的模态的屏幕截图

知道我做错了什么吗？

Answer 1

您缺少 type 内部密码属性。

password: {
        type: 'string',
        title: '',
        ui: {
          i18n: 'g.password',
          type: "password"
      }

ng-alain 使用 SFUISchema 呈现密码字段

ng-alain render a password field using SFUISchema

angular

ng-zorro-antd

ng-alain