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

[ShanmugasundaramV]

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.

[EstebanBustamante]

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.

[ShanmugasundaramV]

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 · Accepted solution]

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