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

Question

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 in the respective attribute and disable the field.

Answer 1

I got this below answer from other website which is the exact one.

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.