jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-254: grey out button if not validated

Browse source
This commit is contained in:
Adam Caouette 2022-01-11 14:32:57 -05:00
parent 42d2d6334b
commit 3c10f75b67
1 changed files with 83 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/layouts/form-test/form-test.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<Form :validation-schema="schema" @submit="onSubmit" v-slot="{values}"> <Form :validation-schema="schema" @submit="onSubmit" v-slot="{ values, meta }">
<div class="row px-3 mt-4"> <div class="row px-3 mt-4">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group --> <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<h3 class="mx-2 mt-4 mb-0">How many chips are we repairing?</h3> <h3 class="mx-2 mt-4 mb-0">How many chips are we repairing?</h3>
@ -108,10 +108,24 @@
<!-- Here, the error block is included in the component level textInput --> <!-- Here, the error block is included in the component level textInput -->
</div> </div>
<div class="row g-2 mt-4">
<div class="col">
<h3 class="mx-2 mt-4 mb-0">Optional field</h3>
<textInput
name="demo4"
type="text"
label="Optional field (Not Required)"
/>
</div>
<!-- Here, the error block is included in the component level textInput -->
</div>
<div class="g-2 mx-2 mt-6"> <div class="g-2 mx-2 mt-6">
<button>Get your estimate</button> <button :class="!meta.valid && 'form-test-invalid'">Get your estimate</button>
<p>Values</p> <p>Values:</p>
<pre>{{ values }}</pre> <pre>{{ values }}</pre>
<p>Meta.valid:</p>
<pre>{{ meta.valid }}</pre>
</div> </div>
</Form> </Form>
@ -180,6 +194,11 @@ export default {
onSubmit(values) { onSubmit(values) {
console.log('submitted: ', JSON.stringify(values, null ,2)); console.log('submitted: ', JSON.stringify(values, null ,2));
}, },
// onInvalidSubmit({ values, errors, results }) {
// console.log("values: ", values);
// console.log("errors: ", errors);
// console.log("results: ", results);
// }
}, },
}; };
</script> </script>
@ -189,4 +208,7 @@ export default {
color: red; color: red;
font-weight: bold; font-weight: bold;
} }
.form-test-invalid {
opacity: 0.5;
}
</style> </style>