magento 2 - add max length for input fields in Review & Payments/billing form

Question

I am trying to limit number of allowed characters on Firstname input field in my payment methods on Review & Payments area. I am using the magento default check/money order payment method.

Basically this is the area that customers can indicate that their billing address is different from their shipping address.

To achieve this, I am extending Layoutprocessor.php file in my custom module. I have tried the following code, but it seems it is not working.

<?php
namespace MY_MODULE\Block\Checkout;

class LayoutProcessor extends \Magento\Framework\View\Element\AbstractBlock implements \Magento\Checkout\Block\Checkout\LayoutProcessorInterface
{   
    public function process($jsLayout) {

        $jsLayout['components']
        ['checkout']['children']
        ['steps']['children']
        ['billing-step']['children']
        ['payment']['children']
        ['payments-list']['children']
        ['checkmo-form']['children']
        ['form-fields']['children']
        ['firstname']['max_text_length'] = 15;

        return $jsLayout;
    }

}

the max_text_length is available in the following file. magento2-2.1.6/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js. https://github.com/magento/magento2/blob/2.1.6/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js#L56

I am using Magento 2.1.6 version.Please let me know if anyone knows a fix for it.

Answer 1

You can achieve this goal by using Plugins. First You should add the plugin file to MY_MODULE/etc/frontend/di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">


    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="my_module_checkout_block_checkout_layoutprocessor" type="MY_MODULE\Plugin\Checkout\Block\Checkout\LayoutProcessor" sortOrder="100"/>
    </type>
</config>

then Create LayoutProcessor.php under MY_MODULE/Plugin/Checkout/Block/Checkout/ and edit it like this

<?php

namespace MY_MODULE\Plugin\Checkout\Block\Checkout;

class LayoutProcessor
{
    /**
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        $configuration = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']['payment']['children']['payments-list']['children'];
        foreach ($configuration as $paymentGroup => $groupConfig) {
            if (isset($groupConfig['component']) AND $groupConfig['component'] === 'Magento_Checkout/js/view/billing-address') {

                $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
                ['payment']['children']['payments-list']['children'][$paymentGroup]['children']['form-fields']['children']['firstname']['validation'] = [
                    'required-entry' => true, 'min_text_len‌​gth' => 1, 'max_text_length' => 15
                ];

               }
        }

        return $jsLayout;
    }
}