[FR]: Taro组件库，Form组件希望支持下Form.List和Form.useWatch()，使用场景还是比较多的

[chenyong0923]

这个功能解决了什么问题？

1、表单里有相同的多个控件为最小单元，支持增删改
2、表单field受控，互相依赖，需要监听表单值

你期望的组件设计是怎样的？

interface ListField {
name: string; // 这个返回的是 Form.List 的 name 加索引，如 group_0
key: number;
isListField: boolean; // 这个必须要传给 Form.Item
}

interface ListOperations {
add: (defaultValue?: Value, index?: number) => void;
remove: (index: number) => void;
move: (from: number, to: number) => void;
}

    <Form.List name="enterWorkApplyJobDTOList">
        {(fields, { add, remove }) => {
          return (
            <View>
              {fields.map((field, index) => {
                const _index = index + 1;
                return (
                  <View className={styles.field} key={_index.toString()}>
                    <ReduceFilled
                      className={classnames([styles.field__delete], {
                        [styles.field__delete__disabled]: fields.length < 2,
                      })}
                      onClick={() => {
                        fields.length > 1 && remove(index);
                      }}
                    />

                    <FormItem
                      {...field}
                      name={[field.name, 'jobId']}
                      label=" "
                      labelWidth={0}
                      className={styles.job}
                      rules={[{ required: true, message: '请选择' }]}
                    >
                      <FormPicker
                        mode="selector"
                        icon="DownOutlined"
                        range={
                          jobData?.map((item) => ({
                            label: item.name,
                            value: item.id,
                          })) ?? []
                        }
                        rangeKey="label"
                        placeholder="选择岗位"
                      />
                    </FormItem>
                    <FormItem
                      {...field}
                      name={[field.name, 'amount']}
                      label=" "
                      labelWidth={0}
                      className={styles.count}
                      rules={[{ required: true, message: '请输入' }]}
                    >
                      <Input
                        placeholder="请输入"
                        type="number"
                        suffix="人"
                        allowClear={false}
                      />
                    </FormItem>
                  </View>
                );
              })}

              <View
                className={styles.btn}
                onClick={() => {
                  add({ jobId: undefined, amount: undefined });
                }}
              >
                <NewFilled className={styles['btn-icon']} />
                添加岗位
              </View>
            </View>
          );
        }}
      </Form.List>

[henryzp]

这个需求实现的怎么样了？有下文了么？

[henryzp]

@oasis-cloud @chenyong0923