Field manager

This feature supported since v.1.12.0

FieldManager component allows to change form field properties like placeholder, label, classname, apply mask/formatter. This feature could be useful to improve the look of the form, create housenumber field and other custom changes.

Here is a syntax:

define([
    'Swissup_Firecheckout/js/utils/form-field/manager'
], function(manager) {
    'use strict';

    manager('[field-selector]', {
        label: 'Custom Label',
        placeholder: 'Custom Placeholder',
        classname: 'fc-size-l:fc-col-6', // see http://docs.swissuplabs.com/m2/extensions/firecheckout/customization/css-helpers/
        mask: 'phone', // see http://docs.swissuplabs.com/m2/extensions/firecheckout/customization/field-mask/
        newline: true // move the field to the newline
    });

    manager('[field2-selector]', {
        attr: {
            'rows': 5 // works with textarea only
        },
        validator: { // see http://docs.swissuplabs.com/m2/extensions/firecheckout/customization/field-validator/
            'lazy': true, // run first validation on `blur` event instead of default instant validation
            'min-words': 10
        },
        newline: 'fc-size-l fc-size-m' // move the field to the newline if parent container is large or medium
    });
});

All custom js should be placed in custom.js file

There are also separate utils available for each of the property:

Util	Example	Usage Examples
`Swissup_Firecheckout/js/utils/form-field/label`	`label(selector, label)`	Housenumber
`Swissup_Firecheckout/js/utils/form-field/placeholder`	`placeholder(selector, placeholder)`	Housenumber
`Swissup_Firecheckout/js/utils/form-field/classname`	`classname(selector, classname)`	Housenumber, Change field size
`Swissup_Firecheckout/js/utils/form-field/mask`	`mask(selector, mask)`	Field mask, Postcode mask
`Swissup_Firecheckout/js/utils/form-field/attr`	`attr(selector, attributes)`	-
`Swissup_Firecheckout/js/utils/form-field/validator`	`validator(selector, rules)`	Validator, Housenumber
`Swissup_Firecheckout/js/utils/form-field/newline`	`newline(selector, sizes)`	-
`Swissup_Firecheckout/js/utils/form-field/status`	`status(selector, status)`	DependentFields

Field manager

Next up