Magento 2 - Оформить заказ aria - неверно= "ложно"

Я не уверен, ошибка это или я веду себя глупо. То, чего я пытаюсь достичь, заключается в оформлении заказа и вводе следующего:

Aria-недопустимый= "null"

Однако я заметил, что при начальной загрузке проверки каждый ввод на странице загружает

Aria-недопустимый= "ложный"

Это можно увидеть здесь:

enter inputs loading ticks

Галочки указывают, что значение равно false, однако внутри этих элементов нет никакого содержимого.

Я хочу, чтобы значение фактически возвращало null при первой загрузке, а затем использовало Ko.observable, чтобы сказать, должно ли это быть:

Верно - есть ошибка (она пуста)

Ложь - все в порядке

Я порыскал вокруг и обнаружил, что файл находится здесь:

/vendor/magento/module-ui/view/frontend/web/templates/form/element/input.html

И возвращает следующее:

<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
    }" />

Я дошел до этого этапа и попытался найти четную/функцию для "ошибки()", но я заблудился в кроличьей норе.

Если у кого-нибудь есть какие-либо советы по этому поводу, это было бы здорово.

Author: andy jones, 2018-02-22
Source

2 answers

У меня нет рабочего блока M2, который, по крайней мере, 2.2, когда я думаю, что aria-invalid был представлен, поэтому я не могу заглянуть в него, кроме кодовой базы, но я предполагаю, что это происходит.

  1. input.html вызывается из vendor/magento/module-checkout/view/frontend/web/template/shipping-address/form.html:13
  2. form.html вызывается из vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js:61
  3. shipping.js вызывается из vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml:119
  4. Это приводит к компоненту shipping-address - vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml:92, и именно здесь определяются области.

Это ужасный лабиринт, и я несколько раз заблудился, так что я вероятно, пропущенные части, мое мышление - это то, что по пути подсказывает этим входным данным использовать vendor/magento/module-ui/view/base/web/js/form/element/abstract.js, но я не подтвердил это.

Я полагаю, что именно отсюда вызывается функция ошибки.

Существуют подобные функции, которые изменяют состояние this.error().

/**
     * Sets value observable to initialValue property.
     *
     * @returns {Abstract} Chainable.
     */
    reset: function () {
        this.value(this.initialValue);
        this.error(false);

        return this;
    },

Надеюсь, это укажет вам правильное направление, я мог бы быть далеко, так как это чертовски сложно и чрезмерно спроектировано, но именно там я бы начал искать. Предупреждение о том, что изменение abstract.js, вероятно, повлияет на множество других функциональность.

Удачи!

 1
Author: Ben Crook, 2018-02-22 18:40:53

Итак, чтобы ответить на мой собственный вопрос. Да, @бен прав. Тот abstract.js это подходящее место для поиска. Однако сюжет усложняется.

Aria-недопустимый может возвращать только следующие значения:

  • ложь (по умолчанию) Ошибок не обнаружено
  • грамматика Обнаружена грамматическая ошибка. написание A
  • обнаружена орфографическая ошибка.
  • истина Значение не прошло проверку.

Похоже, что вы не можете вернуть значение null в aria атрибут. Дох. Так что же делать?

Кажется, что на содержащем div есть наблюдаемые объекты, это кричало "отредактируйте меня", поэтому добавьте к следующему в аннотации:

/**
         * Extends 'additionalClasses' object.
         *
         * @returns {Abstract} Chainable.
         */
        _setClasses: function () {
            var additional = this.additionalClasses;

            if (_.isString(additional)) {
                this.additionalClasses = {};

                if (additional.trim().length) {
                    additional = additional.trim().split(' ');

                    additional.forEach(function (name) {
                        if (name.length) {
                            this.additionalClasses[name] = true;
                        }
                    }, this);
                }
            }

            _.extend(this.additionalClasses, {
                _required: this.required,
                _error: this.error,
                _complete: this.value,  <- adding this 
                _warn: this.warn,
                _disabled: this.disabled
            });
            console.log(this);
            return this;
        },

Добавление

_ complete: это.значение,

Позволил мне добавить класс в родительский div, и при изменении входного значения с true на false класс добавляется. Я не уверен, что это должен быть запрос на вытягивание? Я не уверен, что все желают этого так же, как я.

Надеюсь, все, кому нужно эта функциональность, надеюсь, это поможет.

 1
Author: andy jones, 2018-02-23 09:36:57