任务：TaskUserForm

使用示例您可以像下面这样使用 TaskUserForm 类：

import { TaskUserForm } from './task-user-form.ts'; // 假设TaskUserForm在同一目录下

async function collectUserInfo(modalCtrl: any) {
  const fieldList = [
    { type: "String", key: "name", name: "姓名", required: true },
    { type: "String", key: "mobile", name: "手机", required: true },
    { type: "Radio", key: "gender", name: "性别", required: false, options: [
      { label: "男", value: "male" },
      { label: "女", value: "female" }
    ]}
  ];

  const task = new TaskUserForm({
    title: '用户信息采集',
    modalCtrl: modalCtrl,
    fieldList: fieldList,
    initialData: {}, // 可以传入初始数据
  });

  try {
    await task.execute();
    console.log('采集结果:', task.output);
    return task.output;
  } catch (error) {
    console.error('表单采集出错:', error);
    return null;
  }
}

说明构造函数: TaskUserForm 接受 modalCtrl 和 fieldList，并初始化输入输出校验规则。 handle 方法: 在执行时调用 getUserForm 函数进行表单采集，并将结果保存到 data 中。类型映射: mapFieldType 方法将用户定义的字段类型映射为 FieldType 类型，以便进行校验。这样，您就可以使用 TaskUserForm 类来进行用户信息的表单采集任务，且具备完整的输入输出校验机制。

组件：用户表单采集

函数形式使用

import { getUserForm } from '../lib/tasks/task-user-form/get-user-form';

async function collectUserInfo(modalCtrl: any) {
  const fieldList = [
    { type: "String", key: "name", name: "姓名", required: true },
    { type: "String", key: "mobile", name: "手机", required: true },
    { type: "Radio", key: "gender", name: "性别", required: false, options: [
      { label: "男", value: "male" },
      { label: "女", value: "female" }
    ]}
  ];

  try {
    const result = await getUserForm({ modalCtrl, fieldList });
    console.log('Collected data:', result);
    return result;
  } catch (error) {
    console.error('Form error:', error);
    return null;
  }
}

细节用法说明

以下是基于 getUserForm 函数的完整使用示例和所有支持的字段类型说明：

1. 使用示例

import { getUserForm } from '../lib/tasks/task-user-form/get-user-form';


async function collectUserInfo(modalCtrl: any) {
  // 定义表单字段配置
  const fieldList = [
    // 文本输入
    { 
      type: "String", 
      key: "name", 
      name: "姓名", 
      required: true,
      placeholder: "请输入真实姓名"
    },
    
    // 数字输入
    { 
      type: "Number", 
      key: "age", 
      name: "年龄", 
      required: false,
      min: 0,
      max: 120
    },
    
    // 日期选择
    { 
      type: "Date", 
      key: "birthday", 
      name: "出生日期", 
      required: true
    },
    
    // 单选按钮
    { 
      type: "Radio", 
      key: "gender", 
      name: "性别", 
      required: true,
      options: [
        { label: "男", value: "male" },
        { label: "女", value: "female" },
        { label: "其他", value: "other" }
      ]
    },
    
    // 下拉选择
    { 
      type: "Select", 
      key: "education", 
      name: "学历", 
      required: false,
      options: [
        { label: "高中", value: "high_school" },
        { label: "大专", value: "college" },
        { label: "本科", value: "bachelor" },
        { label: "硕士", value: "master" },
        { label: "博士", value: "phd" }
      ]
    },
    
    // 多选框
    { 
      type: "Checkbox", 
      key: "hobbies", 
      name: "兴趣爱好", 
      required: false,
      options: [
        { label: "阅读", value: "reading" },
        { label: "运动", value: "sports" },
        { label: "音乐", value: "music" },
        { label: "旅行", value: "travel" }
      ]
    },
    
    // 开关
    { 
      type: "Boolean", 
      key: "subscribe", 
      name: "订阅通知", 
      required: false
    },
    
    // 多行文本
    { 
      type: "Textarea", 
      key: "address", 
      name: "详细地址", 
      required: false,
      placeholder: "请输入详细住址"
    }
  ];

  try {
    // 调用表单采集函数
    const result = await getUserForm({
      modalCtrl: modalCtrl,  // 传入Ionic的ModalController实例
      fieldList: fieldList
    });
    
    if (result) {
      console.log('采集结果:', result);
      // 结果示例:
      // {
      //   name: "张三",
      //   age: 25,
      //   birthday: "1998-05-20",
      //   gender: "male",
      //   education: "bachelor",
      //   hobbies: ["reading", "sports"],
      //   subscribe: true,
      //   address: "北京市朝阳区..."
      // }
      return result;
    } else {
      console.log('用户取消了表单');
      return null;
    }
  } catch (error) {
    console.error('表单采集出错:', error);
    throw error;
  }
}

2. 所有支持的字段类型及写法

类型	描述	必填属性	示例配置
String	文本输入	`required`, `pattern`, `placeholder`	`{ type: "String", key: "name", name: "姓名", required: true, placeholder: "请输入姓名" }`
Number	数字输入	`required`, `min`, `max`	`{ type: "Number", key: "age", name: "年龄", min: 0, max: 120 }`
Date	日期选择	`required`	`{ type: "Date", key: "birthday", name: "出生日期", required: true }`
Radio	单选按钮组	`required`, `options`	`{ type: "Radio", key: "gender", name: "性别", options: [{label:"男",value:"male"}] }`
Select	下拉选择	`required`, `options`	`{ type: "Select", key: "city", name: "城市", options: [{label:"北京",value:"beijing"}] }`
Checkbox	多选框组	`required`, `options`	`{ type: "Checkbox", key: "hobbies", name: "爱好", options: [{label:"游泳",value:"swimming"}] }`
Boolean	开关	-	`{ type: "Boolean", key: "agree", name: "同意协议" }`
Textarea	多行文本	`required`, `placeholder`	`{ type: "Textarea", key: "feedback", name: "意见反馈", placeholder: "请输入您的意见" }`

3. 特殊字段属性说明

options (用于 Radio/Select/Checkbox):

options: [
 { label: "显示文本", value: "实际值" },
 { label: "男", value: "male" }
]

验证规则:
- required: true - 必填字段
- pattern: "正则表达式" - 文本格式验证
- min: 数值 - 最小值(用于Number类型)
- max: 数值 - 最大值(用于Number类型)
日期字段:
- 会自动格式化为 ISO 字符串格式 (如 "2023-05-20")
- 可通过 max 和 min 限制日期范围
多选字段(Checkbox):
- 返回值为数组，包含所有选中的值
- 如: hobbies: ["reading", "music"]

4. 完整调用流程示例

// 在Ionic页面组件中的调用示例
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
  selector: 'app-user-info',
  templateUrl: './user-info.page.html',
})
export class UserInfoPage {
  constructor(private modalCtrl: ModalController) {}

  async openForm() {
    try {
      const userData = await collectUserInfo(this.modalCtrl);
      if (userData) {
        // 处理采集到的数据
        console.log('收到用户数据:', userData);
        // 提交到服务器等操作...
      }
    } catch (error) {
      console.error('表单错误:', error);
    }
  }
}

这个实现支持了常见的所有表单字段类型，并提供了完善的验证机制。您可以根据实际需求组合这些字段类型来构建复杂的表单。

README.md 7.9 KB 文件历史 原始文件