diff --git a/src/renderers/Form/Options.tsx b/src/renderers/Form/Options.tsx
index 7cacd0c6..7625f840 100644
--- a/src/renderers/Form/Options.tsx
+++ b/src/renderers/Form/Options.tsx
@@ -106,745 +106,732 @@ export const detectProps = itemDetectProps.concat([
   'extractValue'
 ]);
 
-export function asOptionsControl(config: OptionsConfig) {
-  return function (Control: React.ComponentType<OptionsControlProps>) {
-    return class FormOptionsItem extends React.Component<OptionsProps, any> {
-      static displayName = `OptionsControl(${config.type})`;
-      static defaultProps = {
-        delimiter: ',',
-        labelField: 'label',
-        valueField: 'value',
-        joinValues: true,
-        extractValue: false,
-        multiple: false,
-        placeholder: '请选择',
-        resetValue: '',
-        deleteConfirmText: '确定要删除？',
-        ...Control.defaultProps
-      };
-      static propsList: any = (Control as any).propsList
-        ? [...(Control as any).propsList]
-        : [];
-      static ComposedComponent = Control;
+export function registerOptionsControl(config: OptionsConfig) {
+  const Control = config.component;
 
-      reaction?: () => void;
-      input: any;
+  class FormOptionsItem extends React.Component<OptionsProps, any> {
+    static displayName = `OptionsControl(${config.type})`;
+    static defaultProps = {
+      delimiter: ',',
+      labelField: 'label',
+      valueField: 'value',
+      joinValues: true,
+      extractValue: false,
+      multiple: false,
+      placeholder: '请选择',
+      resetValue: '',
+      deleteConfirmText: '确定要删除？',
+      ...Control.defaultProps
+    };
+    static propsList: any = (Control as any).propsList
+      ? [...(Control as any).propsList]
+      : [];
+    static ComposedComponent = Control;
 
-      componentWillMount() {
-        const {
-          initFetch,
-          formItem,
-          source,
-          data,
-          setPrinstineValue,
-          defaultValue,
-          multiple,
-          joinValues,
-          extractValue,
-          addHook,
-          formInited,
-          valueField,
-          options,
-          value
-        } = this.props;
+    reaction?: () => void;
+    input: any;
 
-        if (formItem) {
-          formItem.setOptions(normalizeOptions(options));
+    componentWillMount() {
+      const {
+        initFetch,
+        formItem,
+        source,
+        data,
+        setPrinstineValue,
+        defaultValue,
+        multiple,
+        joinValues,
+        extractValue,
+        addHook,
+        formInited,
+        valueField,
+        options,
+        value
+      } = this.props;
 
-          this.reaction = reaction(
-            () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
-            () => this.forceUpdate()
-          );
-        }
+      if (formItem) {
+        formItem.setOptions(normalizeOptions(options));
 
-        let loadOptions: boolean = initFetch !== false;
-
-        if (formItem && joinValues === false && defaultValue) {
-          const selectedOptions = extractValue
-            ? formItem
-                .getSelectedOptions(value)
-                .map(
-                  (selectedOption: Option) =>
-                    selectedOption[valueField || 'value']
-                )
-            : formItem.getSelectedOptions(value);
-          setPrinstineValue(
-            multiple ? selectedOptions.concat() : selectedOptions[0]
-          );
-        }
-
-        loadOptions &&
-          config.autoLoadOptionsFromSource !== false &&
-          (formInited
-            ? this.reload()
-            : addHook && addHook(this.initOptions, 'init'));
+        this.reaction = reaction(
+          () => JSON.stringify([formItem.loading, formItem.filteredOptions]),
+          () => this.forceUpdate()
+        );
       }
 
-      componentDidMount() {
+      let loadOptions: boolean = initFetch !== false;
+
+      if (formItem && joinValues === false && defaultValue) {
+        const selectedOptions = extractValue
+          ? formItem
+              .getSelectedOptions(value)
+              .map(
+                (selectedOption: Option) =>
+                  selectedOption[valueField || 'value']
+              )
+          : formItem.getSelectedOptions(value);
+        setPrinstineValue(
+          multiple ? selectedOptions.concat() : selectedOptions[0]
+        );
+      }
+
+      loadOptions &&
+        config.autoLoadOptionsFromSource !== false &&
+        (formInited
+          ? this.reload()
+          : addHook && addHook(this.initOptions, 'init'));
+    }
+
+    componentDidMount() {
+      this.normalizeValue();
+    }
+
+    shouldComponentUpdate(nextProps: OptionsProps) {
+      if (config.strictMode === false || nextProps.strictMode === false) {
+        return true;
+      } else if (nextProps.source || nextProps.autoComplete) {
+        return true;
+      }
+
+      if (anyChanged(detectProps, this.props, nextProps)) {
+        return true;
+      }
+
+      return false;
+    }
+
+    componentDidUpdate(prevProps: OptionsProps) {
+      const props = this.props;
+      const formItem = props.formItem as IFormItemStore;
+
+      if (!formItem || !props.formInited) {
+        return;
+      } else if (!prevProps.formItem) {
+        // todo 优化 name 变化情况。
+      }
+
+      if (prevProps.value !== props.value || formItem.expressionsInOptions) {
+        formItem.syncOptions();
+      }
+
+      if (prevProps.options !== props.options && formItem) {
+        formItem.setOptions(normalizeOptions(props.options || []));
         this.normalizeValue();
-      }
+      } else if (
+        config.autoLoadOptionsFromSource !== false &&
+        props.source &&
+        formItem &&
+        (prevProps.source !== props.source || prevProps.data !== props.data)
+      ) {
+        if (isPureVariable(props.source as string)) {
+          const prevOptions = resolveVariableAndFilter(
+            prevProps.source as string,
+            prevProps.data,
+            '| raw'
+          );
+          const options = resolveVariableAndFilter(
+            props.source as string,
+            props.data,
+            '| raw'
+          );
+          prevOptions !== options &&
+            formItem.setOptions(normalizeOptions(options || []));
 
-      shouldComponentUpdate(nextProps: OptionsProps) {
-        if (config.strictMode === false || nextProps.strictMode === false) {
-          return true;
-        } else if (nextProps.source || nextProps.autoComplete) {
-          return true;
-        }
-
-        if (anyChanged(detectProps, this.props, nextProps)) {
-          return true;
-        }
-
-        return false;
-      }
-
-      componentDidUpdate(prevProps: OptionsProps) {
-        const props = this.props;
-        const formItem = props.formItem as IFormItemStore;
-
-        if (!formItem || !props.formInited) {
-          return;
-        } else if (!prevProps.formItem) {
-          // todo 优化 name 变化情况。
-        }
-
-        if (prevProps.value !== props.value || formItem.expressionsInOptions) {
-          formItem.syncOptions();
-        }
-
-        if (prevProps.options !== props.options && formItem) {
-          formItem.setOptions(normalizeOptions(props.options || []));
           this.normalizeValue();
         } else if (
-          config.autoLoadOptionsFromSource !== false &&
-          props.source &&
-          formItem &&
-          (prevProps.source !== props.source || prevProps.data !== props.data)
-        ) {
-          if (isPureVariable(props.source as string)) {
-            const prevOptions = resolveVariableAndFilter(
-              prevProps.source as string,
-              prevProps.data,
-              '| raw'
-            );
-            const options = resolveVariableAndFilter(
-              props.source as string,
-              props.data,
-              '| raw'
-            );
-            prevOptions !== options &&
-              formItem.setOptions(normalizeOptions(options || []));
-
-            this.normalizeValue();
-          } else if (
-            isEffectiveApi(props.source, props.data) &&
-            isApiOutdated(
-              prevProps.source,
-              props.source,
-              prevProps.data,
-              props.data
-            )
-          ) {
-            formItem
-              .loadOptions(
-                props.source,
-                props.data,
-                undefined,
-                true,
-                props.onChange
-              )
-              .then(() => this.normalizeValue());
-          }
-        }
-      }
-
-      componentWillUnmount() {
-        this.props.removeHook && this.props.removeHook(this.reload, 'init');
-        this.reaction && this.reaction();
-      }
-
-      normalizeValue() {
-        const {
-          joinValues,
-          extractValue,
-          value,
-          multiple,
-          formItem,
-          valueField
-        } = this.props;
-
-        if (!formItem || joinValues !== false || !formItem.options.length) {
-          return;
-        }
-
-        if (
-          extractValue === false &&
-          (typeof value === 'string' || typeof value === 'number')
-        ) {
-          const selectedOptions = formItem.getSelectedOptions(value);
-          formItem.changeValue(
-            multiple ? selectedOptions.concat() : selectedOptions[0]
-          );
-        } else if (
-          extractValue === true &&
-          value &&
-          !(
-            (Array.isArray(value) &&
-              value.every(
-                val => typeof val === 'string' || typeof val === 'number'
-              )) ||
-            typeof value === 'string' ||
-            typeof value === 'number'
+          isEffectiveApi(props.source, props.data) &&
+          isApiOutdated(
+            prevProps.source,
+            props.source,
+            prevProps.data,
+            props.data
           )
         ) {
-          const selectedOptions = formItem
-            .getSelectedOptions(value)
-            .map(
-              (selectedOption: Option) => selectedOption[valueField || 'value']
-            );
-          formItem.changeValue(
-            multiple ? selectedOptions.concat() : selectedOptions[0]
-          );
-        }
-      }
-
-      getWrappedInstance() {
-        return this.input;
-      }
-
-      @autobind
-      inputRef(ref: any) {
-        this.input = ref;
-      }
-
-      @autobind
-      handleToggle(
-        option: Option,
-        submitOnChange?: boolean,
-        changeImmediately?: boolean
-      ) {
-        const {
-          onChange,
-          joinValues,
-          extractValue,
-          valueField,
-          delimiter,
-          clearable,
-          resetValue,
-          multiple,
-          formItem,
-          value
-        } = this.props;
-
-        if (!formItem) {
-          return;
-        }
-
-        let valueArray = formItem.getSelectedOptions(value).concat();
-        const idx = findIndex(
-          valueArray,
-          optionValueCompare(
-            option[valueField || 'value'],
-            valueField || 'value'
-          )
-        );
-        let newValue: string | Array<Option> | Option = '';
-
-        if (multiple) {
-          if (~idx) {
-            valueArray.splice(idx, 1);
-          } else {
-            valueArray.push(option);
-          }
-
-          newValue = valueArray;
-
-          if (joinValues) {
-            newValue = (newValue as Array<any>)
-              .map(item => item[valueField || 'value'])
-              .join(delimiter);
-          } else if (extractValue) {
-            newValue = (newValue as Array<any>).map(
-              item => item[valueField || 'value']
-            );
-          }
-        } else {
-          if (~idx && clearable) {
-            valueArray.splice(idx, 1);
-          } else {
-            valueArray = [option];
-          }
-
-          newValue = valueArray[0] || resetValue;
-
-          if ((joinValues || extractValue) && newValue) {
-            newValue = (newValue as any)[valueField || 'value'];
-          }
-        }
-
-        onChange && onChange(newValue, submitOnChange, changeImmediately);
-      }
-
-      @autobind
-      handleToggleAll() {
-        const {
-          value,
-          onChange,
-          joinValues,
-          extractValue,
-          valueField,
-          delimiter,
-          resetValue,
-          multiple,
           formItem
-        } = this.props;
-
-        if (!formItem) {
-          return;
-        }
-
-        const selectedOptions = formItem.getSelectedOptions(value);
-        let valueArray =
-          selectedOptions.length === formItem.filteredOptions.length
-            ? []
-            : formItem.filteredOptions.concat();
-
-        let newValue: string | Array<Option> | Option = '';
-
-        if (multiple) {
-          newValue = valueArray;
-
-          if (joinValues) {
-            newValue = (newValue as Array<any>)
-              .map(item => item[valueField || 'value'])
-              .join(delimiter);
-          } else if (extractValue) {
-            newValue = (newValue as Array<any>).map(
-              item => item[valueField || 'value']
-            );
-          }
-        } else {
-          newValue = valueArray[0] || resetValue;
-
-          if (joinValues && newValue) {
-            newValue = (newValue as any)[valueField || 'value'];
-          }
-        }
-
-        onChange && onChange(newValue);
-      }
-
-      // 当有 action 触发，如果指定了 reload 目标组件，有可能会来到这里面来
-      @autobind
-      reload() {
-        this.reloadOptions();
-      }
-
-      @autobind
-      reloadOptions(setError?: boolean) {
-        const {source, formItem, data, onChange} = this.props;
-
-        if (formItem && isPureVariable(source as string)) {
-          formItem.setOptions(
-            normalizeOptions(
-              resolveVariableAndFilter(source as string, data, '| raw') || []
+            .loadOptions(
+              props.source,
+              props.data,
+              undefined,
+              true,
+              props.onChange
             )
-          );
-          return;
-        } else if (!formItem || !isEffectiveApi(source, data)) {
-          return;
+            .then(() => this.normalizeValue());
         }
+      }
+    }
 
-        return formItem.loadOptions(
-          source,
-          data,
-          undefined,
-          false,
-          onChange,
-          setError
+    componentWillUnmount() {
+      this.props.removeHook && this.props.removeHook(this.reload, 'init');
+      this.reaction && this.reaction();
+    }
+
+    normalizeValue() {
+      const {
+        joinValues,
+        extractValue,
+        value,
+        multiple,
+        formItem,
+        valueField
+      } = this.props;
+
+      if (!formItem || joinValues !== false || !formItem.options.length) {
+        return;
+      }
+
+      if (
+        extractValue === false &&
+        (typeof value === 'string' || typeof value === 'number')
+      ) {
+        const selectedOptions = formItem.getSelectedOptions(value);
+        formItem.changeValue(
+          multiple ? selectedOptions.concat() : selectedOptions[0]
+        );
+      } else if (
+        extractValue === true &&
+        value &&
+        !(
+          (Array.isArray(value) &&
+            value.every(
+              val => typeof val === 'string' || typeof val === 'number'
+            )) ||
+          typeof value === 'string' ||
+          typeof value === 'number'
+        )
+      ) {
+        const selectedOptions = formItem
+          .getSelectedOptions(value)
+          .map(
+            (selectedOption: Option) => selectedOption[valueField || 'value']
+          );
+        formItem.changeValue(
+          multiple ? selectedOptions.concat() : selectedOptions[0]
         );
       }
+    }
 
-      @autobind
-      deferLoad(option: Option) {
-        const {deferApi, source, env, formItem, data} = this.props;
+    getWrappedInstance() {
+      return this.input;
+    }
 
-        if (option.loaded) {
-          return;
+    @autobind
+    inputRef(ref: any) {
+      this.input = ref;
+    }
+
+    @autobind
+    handleToggle(
+      option: Option,
+      submitOnChange?: boolean,
+      changeImmediately?: boolean
+    ) {
+      const {
+        onChange,
+        joinValues,
+        extractValue,
+        valueField,
+        delimiter,
+        clearable,
+        resetValue,
+        multiple,
+        formItem,
+        value
+      } = this.props;
+
+      if (!formItem) {
+        return;
+      }
+
+      let valueArray = formItem.getSelectedOptions(value).concat();
+      const idx = findIndex(
+        valueArray,
+        optionValueCompare(option[valueField || 'value'], valueField || 'value')
+      );
+      let newValue: string | Array<Option> | Option = '';
+
+      if (multiple) {
+        if (~idx) {
+          valueArray.splice(idx, 1);
+        } else {
+          valueArray.push(option);
         }
 
-        const api = option.deferApi || deferApi || source;
+        newValue = valueArray;
 
-        if (!api) {
-          env.notify(
-            'error',
-            '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。'
+        if (joinValues) {
+          newValue = (newValue as Array<any>)
+            .map(item => item[valueField || 'value'])
+            .join(delimiter);
+        } else if (extractValue) {
+          newValue = (newValue as Array<any>).map(
+            item => item[valueField || 'value']
           );
-          return;
+        }
+      } else {
+        if (~idx && clearable) {
+          valueArray.splice(idx, 1);
+        } else {
+          valueArray = [option];
         }
 
-        formItem?.deferLoadOptions(option, api, createObject(data, option));
-      }
+        newValue = valueArray[0] || resetValue;
 
-      @autobind
-      async initOptions(data: any) {
-        await this.reload();
-        const {formItem, name} = this.props;
-        if (!formItem) {
-          return;
-        }
-        if (isAlive(formItem) && formItem.value) {
-          setVariable(data, name!, formItem.value);
+        if ((joinValues || extractValue) && newValue) {
+          newValue = (newValue as any)[valueField || 'value'];
         }
       }
 
-      focus() {
-        this.input && this.input.focus && this.input.focus();
+      onChange && onChange(newValue, submitOnChange, changeImmediately);
+    }
+
+    @autobind
+    handleToggleAll() {
+      const {
+        value,
+        onChange,
+        joinValues,
+        extractValue,
+        valueField,
+        delimiter,
+        resetValue,
+        multiple,
+        formItem
+      } = this.props;
+
+      if (!formItem) {
+        return;
       }
 
-      @autobind
-      setOptions(options: Array<any>, skipNormalize = false) {
-        const formItem = this.props.formItem as IFormItemStore;
-        formItem &&
-          formItem.setOptions(
-            skipNormalize ? options : normalizeOptions(options || [])
+      const selectedOptions = formItem.getSelectedOptions(value);
+      let valueArray =
+        selectedOptions.length === formItem.filteredOptions.length
+          ? []
+          : formItem.filteredOptions.concat();
+
+      let newValue: string | Array<Option> | Option = '';
+
+      if (multiple) {
+        newValue = valueArray;
+
+        if (joinValues) {
+          newValue = (newValue as Array<any>)
+            .map(item => item[valueField || 'value'])
+            .join(delimiter);
+        } else if (extractValue) {
+          newValue = (newValue as Array<any>).map(
+            item => item[valueField || 'value']
           );
-      }
-
-      @autobind
-      syncOptions() {
-        const formItem = this.props.formItem as IFormItemStore;
-        formItem && formItem.syncOptions();
-      }
-
-      @autobind
-      setLoading(value: boolean) {
-        const formItem = this.props.formItem as IFormItemStore;
-        formItem && formItem.setLoading(value);
-      }
-
-      @autobind
-      async handleOptionAdd(
-        idx: number | Array<number> = -1,
-        value: any,
-        skipForm: boolean = false
-      ) {
-        let {
-          addControls,
-          disabled,
-          labelField,
-          onOpenDialog,
-          optionLabel,
-          addApi,
-          source,
-          data,
-          valueField,
-          formItem: model,
-          createBtnLabel,
-          env
-        } = this.props;
-
-        // 禁用或者没有配置 name
-        if (disabled || !model) {
-          return;
         }
+      } else {
+        newValue = valueArray[0] || resetValue;
 
-        // 用户没有配置表单项，则自动创建一个 label 输入
-        if (!skipForm && (!Array.isArray(addControls) || !addControls.length)) {
-          addControls = [
-            {
-              type: 'text',
-              name: labelField || 'label',
-              label: false,
-              placeholder: '请输入名称'
-            }
-          ];
+        if (joinValues && newValue) {
+          newValue = (newValue as any)[valueField || 'value'];
         }
-        const ctx = createObject(
-          data,
-          Array.isArray(idx)
-            ? {
-                parent: getTree(model.options, idx.slice(0, idx.length - 1)),
-                ...value
-              }
-            : value
+      }
+
+      onChange && onChange(newValue);
+    }
+
+    // 当有 action 触发，如果指定了 reload 目标组件，有可能会来到这里面来
+    @autobind
+    reload() {
+      this.reloadOptions();
+    }
+
+    @autobind
+    reloadOptions(setError?: boolean) {
+      const {source, formItem, data, onChange} = this.props;
+
+      if (formItem && isPureVariable(source as string)) {
+        formItem.setOptions(
+          normalizeOptions(
+            resolveVariableAndFilter(source as string, data, '| raw') || []
+          )
         );
-
-        let result: any = skipForm
-          ? ctx
-          : await onOpenDialog(
-              {
-                type: 'dialog',
-                title: createBtnLabel || `新增${optionLabel || '选项'}`,
-                body: {
-                  type: 'form',
-                  api: addApi,
-                  controls: addControls
-                }
-              },
-              ctx
-            );
-
-        // 单独发请求
-        if (skipForm && addApi) {
-          try {
-            const payload = await env.fetcher(addApi!, result, {
-              method: 'post'
-            });
-
-            if (!payload.ok) {
-              env.notify('error', payload.msg || '新增失败，请仔细检查');
-              result = null;
-            } else {
-              result = payload.data || result;
-            }
-          } catch (e) {
-            result = null;
-            console.error(e);
-            env.notify('error', e.message);
-          }
-        }
-
-        // 有 result 说明弹框点了确认。否则就是取消了。
-        if (!result) {
-          return;
-        }
-
-        // 没走服务端的。
-        if (!result.hasOwnProperty(valueField || 'value')) {
-          result = {
-            ...result,
-            [valueField || 'value']: result[labelField || 'label']
-          };
-        }
-
-        // 如果配置了 source 且配置了 addApi 直接重新拉取接口就够了
-        // 不能不判断 addApi 就刷新，因为有些场景就是临时添加的。
-        if (source && addApi) {
-          this.reload();
-        } else {
-          // 否则直接前端变更 options
-          let options = model.options.concat();
-          if (Array.isArray(idx)) {
-            options = spliceTree(options, idx, 0, {...result});
-          } else {
-            ~idx
-              ? options.splice(idx, 0, {...result})
-              : options.push({...result});
-          }
-          model.setOptions(options);
-        }
+        return;
+      } else if (!formItem || !isEffectiveApi(source, data)) {
+        return;
       }
 
-      @autobind
-      async handleOptionEdit(
-        value: any,
-        origin: any = value,
-        skipForm: boolean = false
-      ) {
-        let {
-          editControls,
-          disabled,
-          labelField,
-          onOpenDialog,
-          editApi,
-          env,
-          source,
-          data,
-          formItem: model,
-          optionLabel
-        } = this.props;
+      return formItem.loadOptions(
+        source,
+        data,
+        undefined,
+        false,
+        onChange,
+        setError
+      );
+    }
 
-        if (disabled || !model) {
-          return;
-        }
+    @autobind
+    deferLoad(option: Option) {
+      const {deferApi, source, env, formItem, data} = this.props;
 
-        if (
-          !skipForm &&
-          (!Array.isArray(editControls) || !editControls.length)
-        ) {
-          editControls = [
+      if (option.loaded) {
+        return;
+      }
+
+      const api = option.deferApi || deferApi || source;
+
+      if (!api) {
+        env.notify(
+          'error',
+          '请在选项中设置 `deferApi` 或者表单项中设置 `deferApi`，用来加载子选项。'
+        );
+        return;
+      }
+
+      formItem?.deferLoadOptions(option, api, createObject(data, option));
+    }
+
+    @autobind
+    async initOptions(data: any) {
+      await this.reload();
+      const {formItem, name} = this.props;
+      if (!formItem) {
+        return;
+      }
+      if (isAlive(formItem) && formItem.value) {
+        setVariable(data, name!, formItem.value);
+      }
+    }
+
+    focus() {
+      this.input && this.input.focus && this.input.focus();
+    }
+
+    @autobind
+    setOptions(options: Array<any>, skipNormalize = false) {
+      const formItem = this.props.formItem as IFormItemStore;
+      formItem &&
+        formItem.setOptions(
+          skipNormalize ? options : normalizeOptions(options || [])
+        );
+    }
+
+    @autobind
+    syncOptions() {
+      const formItem = this.props.formItem as IFormItemStore;
+      formItem && formItem.syncOptions();
+    }
+
+    @autobind
+    setLoading(value: boolean) {
+      const formItem = this.props.formItem as IFormItemStore;
+      formItem && formItem.setLoading(value);
+    }
+
+    @autobind
+    async handleOptionAdd(
+      idx: number | Array<number> = -1,
+      value: any,
+      skipForm: boolean = false
+    ) {
+      let {
+        addControls,
+        disabled,
+        labelField,
+        onOpenDialog,
+        optionLabel,
+        addApi,
+        source,
+        data,
+        valueField,
+        formItem: model,
+        createBtnLabel,
+        env
+      } = this.props;
+
+      // 禁用或者没有配置 name
+      if (disabled || !model) {
+        return;
+      }
+
+      // 用户没有配置表单项，则自动创建一个 label 输入
+      if (!skipForm && (!Array.isArray(addControls) || !addControls.length)) {
+        addControls = [
+          {
+            type: 'text',
+            name: labelField || 'label',
+            label: false,
+            placeholder: '请输入名称'
+          }
+        ];
+      }
+      const ctx = createObject(
+        data,
+        Array.isArray(idx)
+          ? {
+              parent: getTree(model.options, idx.slice(0, idx.length - 1)),
+              ...value
+            }
+          : value
+      );
+
+      let result: any = skipForm
+        ? ctx
+        : await onOpenDialog(
             {
-              type: 'text',
-              name: labelField || 'label',
-              label: false,
-              placeholder: '请输入名称'
-            }
-          ];
-        }
-
-        let result = skipForm
-          ? value
-          : await onOpenDialog(
-              {
-                type: 'dialog',
-                title: `编辑${optionLabel || '选项'}`,
-                body: {
-                  type: 'form',
-                  api: editApi,
-                  controls: editControls
-                }
-              },
-              createObject(data, value)
-            );
-
-        // 单独发请求
-        if (skipForm && editApi) {
-          try {
-            const payload = await env.fetcher(
-              editApi!,
-              createObject(data, result),
-              {
-                method: 'post'
+              type: 'dialog',
+              title: createBtnLabel || `新增${optionLabel || '选项'}`,
+              body: {
+                type: 'form',
+                api: addApi,
+                controls: addControls
               }
-            );
+            },
+            ctx
+          );
 
-            if (!payload.ok) {
-              env.notify('error', payload.msg || '保存失败，请仔细检查');
-              result = null;
-            } else {
-              result = payload.data || result;
-            }
-          } catch (e) {
-            result = null;
-            console.error(e);
-            env.notify('error', e.message);
-          }
-        }
-
-        // 没有结果，说明取消了。
-        if (!result) {
-          return;
-        }
-
-        if (source && !editApi) {
-          this.reload();
-        } else {
-          const indexes = findTreeIndex(model.options, item => item === origin);
-
-          if (indexes) {
-            model.setOptions(
-              spliceTree(model.options, indexes, 1, {
-                ...origin,
-                ...result
-              })
-            );
-          }
-        }
-      }
-
-      @autobind
-      async handleOptionDelete(value: any) {
-        let {
-          deleteConfirmText,
-          disabled,
-          data,
-          deleteApi,
-          env,
-          formItem: model,
-          source,
-          valueField
-        } = this.props;
-
-        if (disabled || !model) {
-          return;
-        }
-
-        const ctx = createObject(data, value);
-
-        // 如果配置了 deleteConfirmText 让用户先确认。
-        const confirmed = deleteConfirmText
-          ? await env.confirm(filter(deleteConfirmText, ctx))
-          : true;
-        if (!confirmed) {
-          return;
-        }
-
-        // 通过 deleteApi 删除。
+      // 单独发请求
+      if (skipForm && addApi) {
         try {
-          if (!deleteApi) {
-            throw new Error('请配置 deleteApi');
-          }
-
-          const result = await env.fetcher(deleteApi!, ctx, {
-            method: 'delete'
+          const payload = await env.fetcher(addApi!, result, {
+            method: 'post'
           });
 
-          if (!result.ok) {
-            env.notify('error', result.msg || '删除失败，请重试');
-          } else if (source) {
-            this.reload();
+          if (!payload.ok) {
+            env.notify('error', payload.msg || '新增失败，请仔细检查');
+            result = null;
           } else {
-            const options = model.options.concat();
-            const idx = findIndex(
-              options,
-              item =>
-                item[valueField || 'value'] == value[valueField || 'value']
-            );
-
-            if (~idx) {
-              options.splice(idx, 1);
-              model.setOptions(options);
-            }
+            result = payload.data || result;
           }
         } catch (e) {
+          result = null;
           console.error(e);
           env.notify('error', e.message);
         }
       }
 
-      render() {
-        const {
-          value,
-          formItem,
-          addApi,
-          editApi,
-          deleteApi,
-          creatable,
-          editable,
-          removable
-        } = this.props;
-
-        return (
-          <Control
-            {...this.props}
-            ref={this.inputRef}
-            options={formItem ? formItem.filteredOptions : []}
-            onToggle={this.handleToggle}
-            onToggleAll={this.handleToggleAll}
-            selectedOptions={formItem ? formItem.getSelectedOptions(value) : []}
-            loading={formItem ? formItem.loading : false}
-            setLoading={this.setLoading}
-            setOptions={this.setOptions}
-            syncOptions={this.syncOptions}
-            reloadOptions={this.reload}
-            deferLoad={this.deferLoad}
-            creatable={
-              creatable || (creatable !== false && isEffectiveApi(addApi))
-            }
-            editable={
-              editable || (editable !== false && isEffectiveApi(editApi))
-            }
-            removable={
-              removable || (removable !== false && isEffectiveApi(deleteApi))
-            }
-            onAdd={this.handleOptionAdd}
-            onEdit={this.handleOptionEdit}
-            onDelete={this.handleOptionDelete}
-          />
-        );
+      // 有 result 说明弹框点了确认。否则就是取消了。
+      if (!result) {
+        return;
       }
-    };
-  };
-}
 
-export function registerOptionsControl(config: OptionsConfig) {
-  const Control = config.component;
+      // 没走服务端的。
+      if (!result.hasOwnProperty(valueField || 'value')) {
+        result = {
+          ...result,
+          [valueField || 'value']: result[labelField || 'label']
+        };
+      }
+
+      // 如果配置了 source 且配置了 addApi 直接重新拉取接口就够了
+      // 不能不判断 addApi 就刷新，因为有些场景就是临时添加的。
+      if (source && addApi) {
+        this.reload();
+      } else {
+        // 否则直接前端变更 options
+        let options = model.options.concat();
+        if (Array.isArray(idx)) {
+          options = spliceTree(options, idx, 0, {...result});
+        } else {
+          ~idx
+            ? options.splice(idx, 0, {...result})
+            : options.push({...result});
+        }
+        model.setOptions(options);
+      }
+    }
+
+    @autobind
+    async handleOptionEdit(
+      value: any,
+      origin: any = value,
+      skipForm: boolean = false
+    ) {
+      let {
+        editControls,
+        disabled,
+        labelField,
+        onOpenDialog,
+        editApi,
+        env,
+        source,
+        data,
+        formItem: model,
+        optionLabel
+      } = this.props;
+
+      if (disabled || !model) {
+        return;
+      }
+
+      if (!skipForm && (!Array.isArray(editControls) || !editControls.length)) {
+        editControls = [
+          {
+            type: 'text',
+            name: labelField || 'label',
+            label: false,
+            placeholder: '请输入名称'
+          }
+        ];
+      }
+
+      let result = skipForm
+        ? value
+        : await onOpenDialog(
+            {
+              type: 'dialog',
+              title: `编辑${optionLabel || '选项'}`,
+              body: {
+                type: 'form',
+                api: editApi,
+                controls: editControls
+              }
+            },
+            createObject(data, value)
+          );
+
+      // 单独发请求
+      if (skipForm && editApi) {
+        try {
+          const payload = await env.fetcher(
+            editApi!,
+            createObject(data, result),
+            {
+              method: 'post'
+            }
+          );
+
+          if (!payload.ok) {
+            env.notify('error', payload.msg || '保存失败，请仔细检查');
+            result = null;
+          } else {
+            result = payload.data || result;
+          }
+        } catch (e) {
+          result = null;
+          console.error(e);
+          env.notify('error', e.message);
+        }
+      }
+
+      // 没有结果，说明取消了。
+      if (!result) {
+        return;
+      }
+
+      if (source && !editApi) {
+        this.reload();
+      } else {
+        const indexes = findTreeIndex(model.options, item => item === origin);
+
+        if (indexes) {
+          model.setOptions(
+            spliceTree(model.options, indexes, 1, {
+              ...origin,
+              ...result
+            })
+          );
+        }
+      }
+    }
+
+    @autobind
+    async handleOptionDelete(value: any) {
+      let {
+        deleteConfirmText,
+        disabled,
+        data,
+        deleteApi,
+        env,
+        formItem: model,
+        source,
+        valueField
+      } = this.props;
+
+      if (disabled || !model) {
+        return;
+      }
+
+      const ctx = createObject(data, value);
+
+      // 如果配置了 deleteConfirmText 让用户先确认。
+      const confirmed = deleteConfirmText
+        ? await env.confirm(filter(deleteConfirmText, ctx))
+        : true;
+      if (!confirmed) {
+        return;
+      }
+
+      // 通过 deleteApi 删除。
+      try {
+        if (!deleteApi) {
+          throw new Error('请配置 deleteApi');
+        }
+
+        const result = await env.fetcher(deleteApi!, ctx, {
+          method: 'delete'
+        });
+
+        if (!result.ok) {
+          env.notify('error', result.msg || '删除失败，请重试');
+        } else if (source) {
+          this.reload();
+        } else {
+          const options = model.options.concat();
+          const idx = findIndex(
+            options,
+            item => item[valueField || 'value'] == value[valueField || 'value']
+          );
+
+          if (~idx) {
+            options.splice(idx, 1);
+            model.setOptions(options);
+          }
+        }
+      } catch (e) {
+        console.error(e);
+        env.notify('error', e.message);
+      }
+    }
+
+    render() {
+      const {
+        value,
+        formItem,
+        addApi,
+        editApi,
+        deleteApi,
+        creatable,
+        editable,
+        removable
+      } = this.props;
+
+      return (
+        <Control
+          {...this.props}
+          ref={this.inputRef}
+          options={formItem ? formItem.filteredOptions : []}
+          onToggle={this.handleToggle}
+          onToggleAll={this.handleToggleAll}
+          selectedOptions={formItem ? formItem.getSelectedOptions(value) : []}
+          loading={formItem ? formItem.loading : false}
+          setLoading={this.setLoading}
+          setOptions={this.setOptions}
+          syncOptions={this.syncOptions}
+          reloadOptions={this.reload}
+          deferLoad={this.deferLoad}
+          creatable={
+            creatable || (creatable !== false && isEffectiveApi(addApi))
+          }
+          editable={editable || (editable !== false && isEffectiveApi(editApi))}
+          removable={
+            removable || (removable !== false && isEffectiveApi(deleteApi))
+          }
+          onAdd={this.handleOptionAdd}
+          onEdit={this.handleOptionEdit}
+          onDelete={this.handleOptionDelete}
+        />
+      );
+    }
+  }
 
   return registerFormItem({
     ...(config as FormItemBasicConfig),
     strictMode: false,
-    component: asOptionsControl(config)(Control)
+    component: FormOptionsItem
   });
 }
 
diff --git a/src/renderers/Form/index.tsx b/src/renderers/Form/index.tsx
index cd563cf3..176d7ee3 100644
--- a/src/renderers/Form/index.tsx
+++ b/src/renderers/Form/index.tsx
@@ -34,7 +34,6 @@ import {LazyComponent} from '../../components';
 import {isAlive} from 'mobx-state-tree';
 import {asFormItem} from './Item';
 import {SimpleMap} from '../../utils/SimpleMap';
-import {asOptionsControl} from './Options';
 export type FormGroup = FormSchema & {
   title?: string;
   className?: string;
@@ -1027,11 +1026,7 @@ export default class Form extends React.Component<FormProps, object> {
             control.options || {
               strictMode: false
             }
-          )(
-            control.options || control.source
-              ? asOptionsControl(control.component)
-              : control.component
-          );
+          )(control.component);
           this.componentCache.set(control.component, cache);
           control.component = cache;
         }