如何为动态表单中生成的自定义元素添加Aurelia验证？

看起来你已经在main.ts和DynamicForm.ts里完成了Aurelia-Validation的注入和初始化，接下来给<custom-input>这类自定义元素加上验证功能其实很清晰，我给你整理了完整的实现步骤：

1. 完善自定义元素的验证配置 #

首先补全你的CustomInput类，需要注入ValidationController和Element，同时配置验证规则（支持内部定义或外部传入）：

import { customElement, useView, bindable, bindingMode, inject } from 'aurelia-framework';
import { ValidationController, ValidationRules, validateTrigger } from 'aurelia-validation';
import { Element } from 'aurelia-templating';

@customElement('custom-input')
@useView('./custominput.html')
@inject(ValidationController, Element)
export class CustomInput {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) fieldValue: string;
  @bindable label: string;
  // 支持外部传入自定义验证规则，让组件更灵活
  @bindable validationRules: ValidationRules;

  constructor(
    private validationController: ValidationController,
    private element: Element
  ) {
    // 设置验证触发时机：输入变化时触发
    this.validationController.validateTrigger = validateTrigger.change;
  }

  attached() {
    // 优先使用外部传入的规则，没有则用内部默认规则
    if (this.validationRules) {
      this.validationRules.on(this);
    } else {
      // 示例：默认必填+最小长度3位的规则
      ValidationRules
        .ensure('fieldValue')
        .required().withMessage('此项为必填')
        .minLength(3).withMessage('输入内容至少3个字符')
        .on(this);
    }

    // 将当前组件实例注册到验证控制器，这样才能被全局验证捕获
    this.validationController.addObject(this);
  }

  detached() {
    // 组件销毁时移除注册，避免内存泄漏
    this.validationController.removeObject(this);
  }
}

2. 自定义元素视图绑定验证消息 #

在custominput.html里，给输入框加上验证绑定行为，并显示错误提示：

<div class="form-group">
  <label>${label}</label>
  <!-- 关键：加上& validate绑定行为触发验证 -->
  <input type="text" value.bind="fieldValue & validate" class="form-control">
  <!-- 显示验证错误消息 -->
  <span class="text-danger mt-1 d-block" 
        if.bind="validationController.errors.length > 0">
    ${validationController.errors[0].message}
  </span>
</div>

3. 在动态表单中使用带验证的自定义元素 #

在DynamicForm里，你可以直接使用自定义元素，也可以传入专属的验证规则：

DynamicForm视图： #

<template>
  <form submit.delegate="handleSubmit()">
    <!-- 示例1：使用默认规则的自定义输入 -->
    <custom-input 
      label="昵称" 
      field-value.bind="formData.nickname">
    </custom-input>

    <!-- 示例2：传入自定义规则的自定义输入 -->
    <custom-input 
      label="用户名" 
      field-value.bind="formData.username"
      validation-rules.bind="usernameValidationRules">
    </custom-input>

    <button type="submit" class="btn btn-primary mt-3">提交表单</button>
  </form>
</template>

DynamicForm逻辑： #

import { inject } from 'aurelia-framework';
import { ValidationController, ValidationRules } from 'aurelia-validation';

@inject(ValidationController)
export class DynamicForm {
  formData = { nickname: '', username: '' };
  usernameValidationRules: ValidationRules;

  constructor(private validationController: ValidationController) {
    // 定义用户名专属验证规则
    this.usernameValidationRules = ValidationRules
      .ensure('fieldValue')
      .required().withMessage('用户名不能为空')
      .matches(/^[a-zA-Z0-9_]{4,16}$/).withMessage('用户名需4-16位，仅含字母、数字和下划线')
      .on(this);
  }

  async handleSubmit() {
    // 触发全局表单验证
    const validationResult = await this.validationController.validate();
    if (validationResult.valid) {
      // 验证通过，执行提交逻辑
      console.log('表单数据验证通过:', this.formData);
    }
  }
}

关键注意点 #

• 一定要在组件attached生命周期里注册到ValidationController，detached时移除，避免内存泄漏
• 输入框必须加上& validate绑定行为，否则不会触发实时验证
• 如果是动态生成的自定义元素，确保元素挂载完成后再配置验证规则和注册控制器

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