iview的Form与Modal同时使用时无法设置FormItem作为Modal footer，无法进行表单验证

Question

写了个路由管理页面，点击添加路由弹出 modal，填写表单，并进行自动验证。
但是用<div slot="footer">无法正确渲染按钮。

代码：

html片段：

<Modal v-model="addRouteModal" title="添加路由">
        <Form ref="newRouteInModal" :model="newRouteInModal" :rules="routeValidate" label-position="left" :label-width="100">
            <FormItem prop="target" label="IP地址">
                <Input v-model="newRouteInModal.target" :autofocus="true"></Input>
            </FormItem>
            <FormItem prop="genmask" label="子网掩码">
                <Input v-model="newRouteInModal.genmask"></Input>
            </FormItem>
            <FormItem prop="gateway" label="网关地址">
                <Input v-model="newRouteInModal.gateway"></Input>
            </FormItem>

            <div slot="footer">
                <FormItem>
                    <Button type="primary" @click="addRouteModalOnOk('newRouteInModal')">添加</Button>
                    <Button type="ghost" @click="handleReset('newRouteInModal')">取消</Button>
                </FormItem>
            </div>

        </Form>
    </Modal>

js片段：

handleReset(name) {
    this.$refs[name].resetFields();
},

addRouteModalOnOk(name) {
    this.$refs[name].validate((valid) => {
        if (valid) {
            this.$Message.success('Success!');
        } else {
            this.$Message.error('Fail!');
        }
    });
},

如果用modal原生按钮的话会丢失<FormItem>属性，this.$refs[name].validate就会失效。

有啥办法能在modal中使用form的表单验证功能吗？

Answer 1

    <Modal
      v-model="updataVisible"
      :mask-closable="false"
      :styles="{top: '16%'}"
      width="800"
      @on-visible-change="beforeClose">
      <div slot="header" class="font-16 font-w900">
        {{updataTitle}}
      </div>
      <Form ref="ruleFormValidate" :model="updataObj" :rules="ruleValidate" :label-width="120" label-position="left">
        </FormItem>
        <!--类型-->
        <FormItem label="Rule Type" prop="ruleType" class="width-80">
          <Select size="large" v-model="updataObj.ruleType" placeholder="Please Select Rule Type" clearable filterable>
            <Option v-for="item in controlRuleTypeList" :value="item.ruleType" :key="item.ruleType">{{ item.value }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" @click="submitForm('ruleFormValidate')">Submit</Button>
        <Button type="ghost" size="large" @click="cancleSubmit('ruleFormValidate')" style="margin-left: 8px">Cancle</Button>
      </div>
      <!--提交时加载动画-->
      <Spin fix v-if="subLoading">
        <Icon type="load-c" size=30 class="demo-spin-icon-load"></Icon>
        <div>Submitting...</div>
      </Spin>
    </Modal>

这样验证没问题