Add class to input element if field is required

Question

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?

Answer 1

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.