CODEWITHSUNDEEP
javascriptvue.jsvalidationinput
Ioan Dimi
Ioan Dimi

Reputation: 209

Disable a certain text input that has been created dynamically if the length is over a certain amount of chars(VUE.JS)

I have the following Vue template which creates Bootstrap text inputs dynamically. The user can get the values onSubmit from the inputs.

Now, I need to disable an input if the text length is over 10 chars. I am struggling with it since yesterday. Any help is more than welcome

<script>
export default {
  data() {
    return {
      items: [],
      inputsAmount: 0,
      form: [],
      disableInput: false
    };
  },
  methods: {
    addInput() {
      let theNumberOfInputs = this.inputsAmount++;
      if (theNumberOfInputs < 8) {
        this.items.push({ value: theNumberOfInputs });
      } else {
        return;
      }
    },
    getFormsInputs() {
      let theFormsInputs = {}, theQuestionnaire = [], overLimit = false;
      console.log(this.form);
      if (this.form.length) {
        this.form.forEach((inputValues, iInputValues) => {
          theFormsInputs["answer" + (iInputValues + 3)] = inputValues;
          overLimit = this.checkInputLenght(inputValues);
        });
      }
      console.log(overLimit);
      if(!overLimit){ theQuestionnaire.push(theFormsInputs); }
      return theQuestionnaire;
    },
    submit() {
      const theQuestionnaire = this.getFormsInputs();
    },
    checkInputLenght(pInputValues) {
      if (pInputValues.length > 80) {
        console.log("Limited Excist");
        this.disableInput = true;
        return true;
      }
    }
  }
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div>
    <b-container>
      <b-row class="mt-2" v-for="(item, iItem) in items" :key="iItem">
        <b-form-input v-model="form[iItem]" placeholder="Please, type your answer."></b-form-input>
      </b-row>
      <button @click="addInput()">Test</button>
      <button @click="submit()">Submit</button>
      <button @click="resetState()">Reset</button>
    </b-container>
  </div>
</template>


<script>
//TODO CHECK FOR HOW TO PASS DATA

Upvotes: 0

Views: 83

Answers (1)

Yasio
Yasio

Reputation: 490

Create disabledInputs: [] array in your reactive data

data() {
    return {
      items: [],
      inputsAmount: 0,
      form: [],
      disabledInputs: []
    };
  },

Add :disabled="disabledInputs.includes(`input_${iItem}`)" to your b-form input attributes

<b-row class="mt-2" v-for="(item, iItem) in items" :key="iItem">
        <b-form-input v-model="form[iItem]" placeholder="Please, type your answer." :disabled="disabledInputs.includes(`input_${iItem}`)"></b-form-input>
</b-row>

Pass the index to you check method

this.form.forEach((inputValues, iInputValues) => {
  theFormsInputs["answer" + (iInputValues + 3)] = inputValues;
  overLimit = this.checkInputLenght(inputValues, iInputValues); //here
});

Add index to disabled array

checkInputLenght(pInputValues, idx) {
  if (pInputValues.length > 10) {
    this.disabledInputs.push(`input_${idx}`); // add to array
    return true;
  }
},

Working example:

https://codesandbox.io/s/silly-forest-pmxd8?file=/src/App.vue

Upvotes: 1

Related Questions