write a route management page, click add Route pop-up modal, to fill out the form and verify it automatically.
but the button cannot be rendered correctly with < div slot= "footer" > .
Code:
html fragment:
<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 fragment:
handleReset(name) {
this.$refs[name].resetFields();
},
addRouteModalOnOk(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success("Success!");
} else {
this.$Message.error("Fail!");
}
});
}, if you use the modal native button, the < FormItem > attribute will be lost, and the this.$ refs [name] .validate will be invalidated.
is there any way to use form"s form validation feature in modal?