Angular中Formio表单required属性验证失效问题求助

问题描述 #

在Angular项目中使用Formio渲染动态表单，已通过表单JSON的validate.required: true标记必填字段，但提交时空必填字段未触发验证，表单仍能成功提交，希望复用Formio原生验证逻辑，避免自定义冗余验证。

字段JSON示例：

"validate": {
  "json": "",
  "custom": "",
  "unique": false,
  "pattern": "",
  "multiple": false,
  "required": true,
  "maxLength": "",
  "minLength": "",
  "customMessage": "",
  "customPrivate": false,
  "strictDateValidation": false
}

组件HTML代码：

<div *ngIf="form && submission">
    <formio [form]="form"
            [submission]="submission"
            [readOnly]="readonly"
            [viewOnly]="readonly">
    </formio>
</div>

解决方案 #

1. 确保使用Formio原生提交逻辑 #

如果使用自定义外部按钮提交，必须手动调用Formio的验证方法，不能直接提交：

import { Component, ViewChild } from '@angular/core';
import { FormioComponent } from '@formio/angular';

@Component({
  selector: 'app-form-container',
  templateUrl: './form-container.component.html'
})
export class FormContainerComponent {
  @ViewChild(FormioComponent) formioComponent!: FormioComponent;
  form: any;
  submission: any = { data: {} };
  readonly = false;

  handleSubmit() {
    // 先执行Formio原生验证
    this.formioComponent.formio.validate().then(validationResult => {
      if (validationResult.valid) {
        // 验证通过后提交
        this.formioComponent.formio.submit().then(submittedData => {
          console.log('提交成功', submittedData);
        });
      } else {
        // 验证失败时，Formio会自动在字段旁显示错误提示
        console.error('验证失败', validationResult.errors);
      }
    });
  }
}

若使用Formio自带的提交按钮，需确认表单JSON中已配置提交按钮组件，且未禁用验证。

2. 检查表单JSON配置完整性 #

• 确认validate.required位于字段组件的validate对象下，而非表单根节点。完整字段示例：

  {
    "type": "textfield",
    "key": "email",
    "label": "邮箱",
    "validate": {
      "required": true,
      "customMessage": "邮箱不能为空"
    }
  }
  

• 检查表单根节点是否存在noValidate: true，该属性会全局禁用验证，需改为false或移除。

3. 同步Formio包版本 #

版本不兼容可能导致验证逻辑异常，执行以下命令同步最新兼容版本：

npm install @formio/angular@latest formiojs@latest

4. 修正submission初始值 #

若submission.data中必填字段初始值为null，可能绕过Formio的必填验证，需将初始值设为空字符串或不定义：

// 正确写法
submission: any = { data: { email: "" } };
// 或
submission: any = { data: {} };

内容的提问来源于stack exchange，提问作者JustinRyu2