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

```ts
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 类来进行用户信息的表单采集任务，且具备完整的输入输出校验机制。


# 组件：用户表单采集

# 函数形式使用
``` typescript
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. 使用示例

```typescript
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. 特殊字段属性说明

1. **options** (用于 Radio/Select/Checkbox):
   ```typescript
   options: [
     { label: "显示文本", value: "实际值" },
     { label: "男", value: "male" }
   ]
   ```

2. **验证规则**:
   - `required: true` - 必填字段
   - `pattern: "正则表达式"` - 文本格式验证
   - `min: 数值` - 最小值(用于Number类型)
   - `max: 数值` - 最大值(用于Number类型)

3. **日期字段**:
   - 会自动格式化为 ISO 字符串格式 (如 "2023-05-20")
   - 可通过 `max` 和 `min` 限制日期范围

4. **多选字段(Checkbox)**:
   - 返回值为数组，包含所有选中的值
   - 如: `hobbies: ["reading", "music"]`

### 4. 完整调用流程示例

```typescript
// 在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);
    }
  }
}
```

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