0

In UIs ko template for an input field...

theme\Magento_Ui\web\templates\form\element\input.html

I would like it to have the class "required" depending on if the field's input actually IS required.

By default the template looks like this:

<input class="input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
    name: inputName,
    placeholder: placeholder,
    'aria-describedby': getDescriptionId(),
    'aria-required': required,
    'aria-invalid': error() ? true : 'false',
    id: uid,
    disabled: disabled
}" />

Is there any way to know whether the currently rendered field is required or not?

Bonus question: how would I find out what kind of data is available to this template and how do I access it?

0

Since the validations in M2 are added using KnockouJS it is not as straightforward as classes in M1.

This is how you can check what validations (all the other Knockout info too) are applied to a field from the developer console:

I suggest you install this chrome extension: KnockoutJS debugger

Then you will see a new tab in dev console called "Knockout context". Click on this tab and then inspect your element. Expand $data and you will see validation and the applied validations will be listed.

  • I need this class for css/style reasons. I am not referring to validation here. The question points more to the broader picture. This KO stuff is so abstract that it is hard to know what is what and where it comes from, especially for a frontend developer. Thank you for pointing me to this debugger, unfortunately I am developing in/for firefox. Yet another annoyance... – omsta Apr 5 '18 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.