Building a Custom Control Component

Cristiano Magro

10 days ago 9dfbe6d1cea2eb9f1f9f0edd5fe6a16d3dce76ed

 11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue

@@ -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: '',
@@ -123,6 +135,7 @@
.form-control.invalid input{
border-color: red;
}

.form-control.invalid label{
color: red;
}