From 9dfbe6d1cea2eb9f1f9f0edd5fe6a16d3dce76ed Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Wed, 08 Jan 2025 12:47:53 +0100
Subject: [PATCH] Building a Custom Control Component
---
11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue | 25 +++++++++++++++++++------
1 files changed, 19 insertions(+), 6 deletions(-)
diff --git a/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue b/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
index bcdf72a..1e57924 100644
--- a/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
+++ b/11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue
@@ -1,9 +1,9 @@
<template>
<form @submit.prevent="submitForm">
- <div class="form-control" :class="{invalid: usernameValidity === 'invalid'}">
+ <div class="form-control" :class="{ invalid: usernameValidity === 'invalid' }">
<label for="user-name">Your Name</label>
<input id="user-name" name="user-name" type="text" v-model.trim="userName" @blur="validateInput" />
- <p v-if="usernameValidity === 'invalid'">please enter a valid name</p>
+ <p v-if="usernameValidity === 'invalid'">please enter a valid name</p>
</div>
<div class="form-control">
<label for="age">Your Age (Years)</label>
@@ -47,6 +47,13 @@
<label for="how-other">Other</label>
</div>
</div>
+
+ <div class="form-control">
+ <rating-control>
+
+ </rating-control>
+ </div>
+
<div class="form-control">
<input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
<label for="confirm-terms">Agree to terms of use?</label>
@@ -58,7 +65,12 @@
</template>
<script>
+import RatingControl from './RatingControl.vue';
+
export default {
+ components: {
+ RatingControl,
+ },
data() {
return {
userName: '',
@@ -120,11 +132,12 @@
margin: 0.5rem 0;
}
-.form-control.invalid input{
-border-color: red;
+.form-control.invalid input {
+ border-color: red;
}
-.form-control.invalid label{
-color: red;
+
+.form-control.invalid label {
+ color: red;
}
--
Gitblit v1.8.0