'Trying to disable submit button when there is zero input

I am just a mere beginner. I am trying to use typescript and html to disable the submit button when a user does not enter in a part number. I am having some issues as I get the error when attempting to do so,

 "Cannot find name 'partNumber'".

If any advice could be spared it would greatly be appreciated. Here is all the code that pertains to this....

<div>
    <button id="submitButton"
        :class="{ disabled:partNumber == -1 }"<--error here-->
        :disabled="partNumber == -1" <--and here-->
        @click="submitItem"
    >
        <span>Submit</span>
        <i class="fas fa-send"></i>
    </button>
</div>

Here is the typscript.js

 mounted() {
    for (let element of this.partStore.partEntries as PartDefinition[]) {
      if (element.id == parseInt(this.$route.params.id.toString())) {
        this.localPartEntry.partNumber = element.partNumber;
        this.localPartEntry.variant = element.variant;
        this.localPartEntry.revision = element.revision;
        this.localPartEntry.description = element.description;
        this.localPartEntry.supplier = element.supplier;
        this.localPartEntry.previewImagePath = element.previewImagePath;
        this.localPartEntry.previewImageDateTime = element.previewImageDateTime;
        this.localPartEntry.obsolete = element.obsolete;
        this.localPartEntry.internalOnly = element.internalOnly;
        break;
      }
    }
  },
htmltypescriptbootstrap-4


Solution 1:[1]

As per your script, your partNumber is stored in this.localPartEntry.partNumber.

So the disable condition should be :disabled="localPartEntry.partNumber == -1" instead of :disabled="partNumber == -1".

So the template will be

<div>
    <button id="submitButton"
        :class="{ disabled: localPartEntry.partNumber == -1 }""
        :disabled="localPartEntry.partNumber == -1"
        @click="submitItem"
    >
        <span>Submit</span>
        <i class="fas fa-send"></i>
    </button>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nitheesh

Related Questions