HTML

使用se和fromControl，共同实现定制化的表单验证（对于某些自定义的错误进行验证），方式如下：

  1. <div class="modal-header">
  2.   <div class="modal-title">修改密码</div>
  3. </div>
  5. <div style="width: 100%; margin: 0 auto">
  6.   <form nz-form se-container="1" #passwordForm="ngForm" [formGroup]="validateForm" [gutter]="2" [labelWidth]="110">
  7.     <se label="原始密码" [error]="{ required: '请输入原始密码' }">
  8.       <input type="text" nz-input formControlName="originPassword" placeholder="请输入原始密码" />
  9.     </se>
  10.     <se label="新密码" [error]="{ required: '未输入新密码', min: '密码位数不能少于8位' }">
  11.       <input
  12.         nz-input
  13.         type="password"
  14.         formControlName="newPassword"
  15.         (ngModelChange)="updateConfirmValidator()"
  16.         placeholder="请输入新密码，密码不少于8位"
  17.       />
  18.     </se>
  19.     <se label="确认密码" [error]="{ required: '未输入确认密码', confirm: '两次输入的密码不一致' }">
  20.       <input nz-input type="password" formControlName="confirmPassword" placeholder="请输入确认密码" />
  21.     </se>
  22.   </form>
  23. </div>
  25. <div class="modal-footer">
  26.   <button nz-button type="button" (click)="close()">取消</button>
  27.   <button nz-button nzType="primary" [disabled]="!validateForm.valid" (click)="savePassword()">确认</button>
  28. </div>

JS

  1. import { Component, OnInit, ViewChild } from '@angular/core';
  2. import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
  3. import { Department, DepartmentService, EmployeeService, SystemRole, SystemRoleService, User, UserService } from '@core';
  4. import { SEErrorRefresh } from '@delon/abc/se';
  5. import { SFSchema, SFUISchema, SFUploadWidgetSchema } from '@delon/form';
  6. import { _HttpClient } from '@delon/theme';
  7. import { CondOperator, RequestQueryBuilder } from '@nestjsx/crud-request';
  8. import { NzMessageService } from 'ng-zorro-antd/message';
  9. import { NzModalRef } from 'ng-zorro-antd/modal';
  10. import { from } from 'rxjs';
  11. import { map } from 'rxjs/operators';
  13. interface IFormData {
  14.   originPassword: string;
  15.   newPassword: string;
  16.   confirmPassword: string;
  17. }
  19. @Component({
  20.   selector: 'header-change-password',
  21.   templateUrl: './edit.component.html',
  22. })
  23. export class HeaderChangePasswordComponent implements OnInit {
  24.   validateForm: FormGroup;
  26.   constructor(
  27.     private modal: NzModalRef,
  28.     public msgSrv: NzMessageService,
  29.     public http: _HttpClient,
  30.     private departmentService: DepartmentService,
  31.     private systemRoleService: SystemRoleService,
  32.     private employeeService: EmployeeService,
  33.     private userService: UserService,
  34.     private fb: FormBuilder,
  35.   ) {
  36.     this.validateForm = fb.group({
  37.       originPassword: [null, [Validators.required]],
  38.       newPassword: [null, [Validators.required, this.minLengthValidator]],
  39.       confirmPassword: [null, [Validators.required, this.confirmationValidator]],
  40.     });
  41.   }
  43.   updateConfirmValidator(): void {
  44.     /** wait for refresh value */
  45.     Promise.resolve().then(() => this.validateForm.controls.confirmPassword.updateValueAndValidity());
  46.   }
  48.   confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
  49.     if (!control.value) {
  50.       return { required: true };
  51.     } else if (control.value !== this.validateForm.controls.newPassword.value) {
  52.       return { confirm: true, error: true };
  53.     }
  54.     return {};
  55.   };
  56.   minLengthValidator = (control: FormControl): { [s: string]: boolean } => {
  57.     if (!control.value) {
  58.       return { required: true };
  59.     } else if (control.value.length < 8) {
  60.       return { min: true, error: true };
  61.     }
  62.     return {};
  63.   };
  65.   ngOnInit(): void {}
  67.   savePassword() {
  68.     console.log(this.validateForm.value);
  69.   }
  71.   close() {
  72.     this.modal.destroy();
  73.   }
  74. }

关键点在于自定义的Validator，将输出的错误在se的[errorr]属性中表现出来。
image.png
image.png