【PaletX】ui组件使用-CSDN博客

本文链接：https://blog.csdn.net/weixin_43945903/article/details/137271517

本文讨论了如何在表单中实现输入过程、焦点离开后和点击确认后的不同校验策略，并介绍了自定义验证函数，如必填项验证和名字存在验证的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单

当表单不是以component和template形式时，不需要patchValue重新赋值
srcObj用于赋值表单初始值

表单校验

优先级：输入过程中的校验 > 焦点离开后的校验 > 点击确定按钮后的校验
适用场景：
输入过程中的校验：焦点进入输入框时系统开始校验，发现错误立即提示，这种方式适用于非法字符，长度超限等的校验。
焦点离开后校验：焦点离开输入框后，立即对该项进行校验。这种方式适用于必填项或者无法在输入过程中校验的情况，如长度过短，格式不符等。
点击确定按钮之后校验：对有错的输入项进行错误提示，并且页面焦点自动定位到表单第一个错误处。
a.必填项校验。
b.客户端无法完成的校验。

自定义校验方法

 fieldSet: [
        {
          fields: [
            {
              name: 'id5',
              label: this.translate.get('id'),
              validators: [Validators.max(60), Validators.min(0)],
              validateInfos: {
                max: this.translate.get('inputRange60'),
                min: this.translate.get('inputRange60')
              },
              maxLength: 20,
              type: FieldType.NUMBER,
              width: '172px',
              placeholder: this.translate.get('pleaseInputNumber'),
              required: true,
            },
            {
              name: 'name5',
              label: this.translate.get('name'),
              type: FieldType.STRING,
              placeholder: this.translate.get('customValidPlaceholder'),
              //notice: '自定义校验很简单的，按照本例代码写就行了',
              required: true,
              disabled: false,
              maxLength: 21,
              validators: [this.nameExistsValidate(), Validators.maxLength(20)],
              validateInfos: {
                nameExists: this.translate.get('nameExist'),
                maxlength: this.translate.get('atMost20Char')
              }
            },
         ]
       }
     }

  public nameExistsValidate(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if (control.value !== undefined && !this.existsMap) {
        return {};
      }
      if (this.existsMap[control.value]) {
        return {
          nameExists: true
        };
      }
      return {};
    };
  }