108 lines
2.3 KiB
Vue
108 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
const props = defineProps({
|
|
next: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
previous: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
});
|
|
const next = () => props.next();
|
|
const previous = () => props.previous();
|
|
|
|
const name = ref<string>("");
|
|
const lastname = ref<string>("");
|
|
const age = ref<string>("");
|
|
|
|
const nameRef = ref<any>(null);
|
|
const ageRef = ref<any>(null);
|
|
const lastnameRef = ref<any>(null);
|
|
const myObject: MyObject = {
|
|
name: nameRef,
|
|
lastname: lastnameRef,
|
|
age: ageRef,
|
|
};
|
|
interface MyObject {
|
|
name: any;
|
|
lastname: any;
|
|
age: any;
|
|
[key: string]: any;
|
|
}
|
|
|
|
function onSubmit() {
|
|
const hasError = [];
|
|
for (const key in myObject) {
|
|
if (Object.prototype.hasOwnProperty.call(myObject, key)) {
|
|
const property = myObject[key];
|
|
if (property.value && typeof property.value.validate === "function") {
|
|
const isValid = property.value.validate();
|
|
hasError.push(isValid);
|
|
}
|
|
}
|
|
}
|
|
if (hasError.every((result) => result === true)) {
|
|
console.log("ผ่าน สำเร็จ!");
|
|
} else {
|
|
console.log("ไม่ผ่าน ");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div><h1>step02</h1></div>
|
|
<form @submit.prevent.stop="onSubmit" class="q-gutter-md">
|
|
<q-input
|
|
ref="nameRef"
|
|
filled
|
|
v-model="name"
|
|
label="Your name *"
|
|
hint="Name and surname"
|
|
lazy-rules
|
|
:rules="[(val) => !!val || `${'Name and surname'}`]"
|
|
/>
|
|
<q-input
|
|
ref="lastnameRef"
|
|
filled
|
|
v-model="lastname"
|
|
label="lastname *"
|
|
lazy-rules
|
|
:rules="[(val) => !!val || `${'lastname'}`]"
|
|
/>
|
|
<q-input
|
|
ref="ageRef"
|
|
filled
|
|
type="number"
|
|
v-model="age"
|
|
label="Your age *"
|
|
lazy-rules
|
|
:rules="[(val) => !!val || `${'Your age'}`]"
|
|
/>
|
|
|
|
<div>
|
|
<q-btn label="Submit" type="submit" color="primary" />
|
|
</div>
|
|
</form>
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
label="back"
|
|
color="public"
|
|
@click="previous()"
|
|
class="q-px-md"
|
|
/>
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
label="next"
|
|
color="public"
|
|
@click="next()"
|
|
class="q-px-md"
|
|
/>
|
|
</q-card-actions>
|
|
</template>
|
|
|
|
<style scoped></style>
|