pass a value from ts file to a text field attribute in HTML in Alpine.js | Community
Skip to main content
S
ShanmugasundaramV
March 15, 2024
Solved

pass a value from ts file to a text field attribute in HTML in Alpine.js

  • March 15, 2024
  • 1 reply
  • 1652 views

I am new to Alpine.js. I just want to pass a value from ts file to HTML file to make few text fields disabled for a particular scenario. But i am unable to get the value inside the HTML.

I added this below code in ts file. Since I am working in a project, I can't share entire code. So I shared only few fields. I want to pass this "disableAllFields" variable to HTML.

window.Alpine.data<Partial<UnAuthAddressFormComponent>>(
  'unAuthAddressForm',
  () => ({
    inputs: {},
    disableAllFields: false,
    init(): void {
      this.inputElements = [...this.$el.querySelectorAll('[data-xpr-field]')];
      this.disableAllFields = true;
    }
  })
);

I am trying to pass the above mentioned 'disableAllFields' variable in this below data-sly-set.isDisabled attribute and assigned it to isDisabled.

 

<sly data-sly-use.input="digx/experience/components/templates/form/input/v2/input/input.html"
data-sly-set.inputName="addressLine2" data-sly-set.inputId="${[guid, inputName] @ join = '-'}"
data-sly-set.isDisabled=${disableAllFields}
data-sly-set.inputIodineOptions='["optional"]'
data-sly-set.customAlpineXModel="unAuthAddress.addressLine2" data-sly-call='${input.default @
  name=inputName,
  id=inputId,
  label=model.addressLine2Label,
  isDisabled=isDisabled,
  customAttrsInput=model.customAttrsInput,
  optionsIodine=inputIodineOptions,
  customAlpineXModel=customAlpineXModel
  }' />

 

Kindle help me whether I can pass the value from TS file to data-sly-set.isDisabled field and disable the field otherwise let me know how to disable a text field from TS file.

 
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by EstebanBustamante

Hi, 

It is purely JS functionality what you are looking for, ideally you should use some alpine.js to achieve what you need, you should use something like the "bind directive" https://alpinejs.dev/directives/bind, to change dynamically the value of the props. You can find some examples here:
https://jianjye.medium.com/how-to-disable-button-on-click-with-alpinejs-4a536cbb63ac

https://jsfiddle.net/pqt6khn2/1/

https://alpinejshandbook.com/examples/?path=/story/chapter-1-5-menu--default

 

However, you could still achieve this behavior using vanilla JS, you should get the element(s) that you want to update (either identified by class or relative to a known element) and then update the properties as needed such as below:

let el = document.getElementById('myButtonId'); el.ariaDisabled = 'true'; //Something like this can work as well document.querySelectorAll('.my-button .otherButtonClass').forEach(function (item) {item.setAttribute('aria-disabled', true);});

Hope this helps

1 reply

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
March 15, 2024

Hi,

That's not possible. The HTL code runs server-side, and your TS code will run client-side. This means that when you try to execute the TS logic, the data-sly-set.isDisabled value has already been set. What you need to do is directly interact with the HTML through your JS (Alpine) in this case.

 

Hope this helps.

Esteban Bustamante
    S
    ShanmugasundaramVAuthor
    March 15, 2024

    Thanks a lot for your quick response Esteban. 

     

    I just want to disable few fields for particular scenario dynamically. If i set this attribute 

    data-sly-set.isDisabled=true in data-sly tag, The text field is getting disabled perfectly with data-disabled="true" in parent <div> tag, aria-disabled="true" and disabled="disabled" in input tag.
    <div data-xpr-form-track="" data-active="false" data-complete="false" data-disabled="false" class="tdds-text-field__track"> <label class="tdds-text-field__label" for="field-unAuthAddressForm-5fbc2968df-addressLine1">Address</label> <input class="tdds-text-field__input" id="field-unAuthAddressForm-5fbc2968df-addressLine1" name="addressLine1" type="text" aria-disabled="false" required="" aria-required="true" aria-invalid="true" x-model="unAuthAddress.addressLine1" data-xpr-field-value=""> </div>

     

    When i try through javascript, I am unable to change data-disabled value to "true" in parent <div> tag. I am unable to set aria-disabled and disabled property in input field alone. Is there any way to change in parent <div> tag as well.

      EstebanBustamante
      Community Advisor and Adobe Champion
      EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
      Community Advisor and Adobe Champion
      March 15, 2024

      Hi, 

      It is purely JS functionality what you are looking for, ideally you should use some alpine.js to achieve what you need, you should use something like the "bind directive" https://alpinejs.dev/directives/bind, to change dynamically the value of the props. You can find some examples here:
      https://jianjye.medium.com/how-to-disable-button-on-click-with-alpinejs-4a536cbb63ac

      https://jsfiddle.net/pqt6khn2/1/

      https://alpinejshandbook.com/examples/?path=/story/chapter-1-5-menu--default

       

      However, you could still achieve this behavior using vanilla JS, you should get the element(s) that you want to update (either identified by class or relative to a known element) and then update the properties as needed such as below:

      let el = document.getElementById('myButtonId'); el.ariaDisabled = 'true'; //Something like this can work as well document.querySelectorAll('.my-button .otherButtonClass').forEach(function (item) {item.setAttribute('aria-disabled', true);});

      Hope this helps

      Esteban Bustamante
        Terms & ConditionsAccessibility statement

        Loading footer...