tuain-ng-forms-lib 0.12.20 → 0.12.30

package/fesm2015/tuain-ng-forms-lib.js

@@ -143,12 +143,40 @@ const DEFAULT_STATE_FLOW = {
     ]
 };
 
+const MONITORED_ATTRIBUTES$1 = {
+    _maxLength: 'maxLength',
+    _onValidation: '_onValidation',
+    _fieldValue: 'value',
+    captureType: 'captureType',
+    fieldTitle: 'fieldTitle',
+    fieldType: 'fieldType',
+    errorMessage: 'errorMessage',
+    errorType: 'errorType',
+    errorCode: 'errorCode',
+    visibleLabel: 'visibleLabel',
+    fieldRequired: 'fieldRequired',
+    fieldOptions: 'fieldOptions',
+};
 class FieldComponent {
     constructor() {
         this.componentConstants = Object.assign({}, componentConstants);
     }
     ngOnInit() {
-        this.fieldObject.widget = this;
+        if (this.fieldObject) {
+            // Atributos estáticos
+            this.fieldCode = this.fieldObject.fieldCode;
+            this.fieldInfo = this.fieldObject.fieldInfo;
+            this.fieldAlignment = this.fieldObject.fieldAlignment;
+            this.tooltipText = this.fieldObject.tooltipText;
+            this.fieldObject.widget = this;
+            // Atributos dinámicos
+            this.fieldObject.attributeChange.subscribe(event => {
+                const { name, value } = event;
+                if (this[MONITORED_ATTRIBUTES$1[name]]) {
+                    this[MONITORED_ATTRIBUTES$1[name]] = value;
+                }
+            });
+        }
         this.start();
     }
     start() { }
@@ -311,9 +339,9 @@ class FormElement {
         this.setVisibility((_b = elementDefinition === null || elementDefinition === void 0 ? void 0 : elementDefinition.visible) !== null && _b !== void 0 ? _b : true);
         this.widget = null;
     }
-    isField() { return this.type === componentConstants.ELEMENTTYPE_FIELD; }
-    isAction() { return this.type === componentConstants.ELEMENTTYPE_ACTION; }
-    isTable() { return this.type === componentConstants.ELEMENTTYPE_TABLE; }
+    isField() { return this.elementType === componentConstants.ELEMENTTYPE_FIELD; }
+    isAction() { return this.elementType === componentConstants.ELEMENTTYPE_ACTION; }
+    isTable() { return this.elementType === componentConstants.ELEMENTTYPE_TABLE; }
     setVisibleStates(newStates) {
         const visibleStates = (!Array.isArray(newStates) && typeof newStates === 'string')
             ? newStates.split(',').map(state => state.trim()).filter(state => state.length > 0)
@@ -592,7 +620,7 @@ class RecordTable extends FormElement {
         this._tableColumnObj = {};
         this._actionsObj = {};
         this.allSelected = false;
-        this.type = componentConstants.ELEMENTTYPE_TABLE;
+        this.elementType = componentConstants.ELEMENTTYPE_TABLE;
         this.waiting = false;
         this.complexFilter = false;
         this.currentPage = 1;
@@ -1170,7 +1198,7 @@ class RecordFormSubSection {
                         break;
                 }
                 if (elementObject) {
-                    elementObject.type = type;
+                    elementObject.elementType = type;
                     arrayToAdd.push(elementObject);
                     this.subSectionElements.push(elementObject);
                     this.elementsArray[code] = elementObject;
@@ -1307,7 +1335,7 @@ class FormAction extends FormElement {
         super(actionDefinition);
         this._actionActivated = new Subject();
         this.inProgress = false;
-        this.type = componentConstants.ELEMENTTYPE_ACTION;
+        this.elementType = componentConstants.ELEMENTTYPE_ACTION;
         this.actionCode = actionDefinition.actionCode ? actionDefinition.actionCode.toString() : '';
         this.actionName = actionDefinition.actionTitle;
         this.iconName = actionDefinition.iconName || this.actionCode;
@@ -1349,76 +1377,206 @@ const FIELD_ERR_MSG = 'errorMessage';
 const FIELD_TOOLTIP = 'tooltipText';
 const FIELD_INFO = 'info';
 const FIELD_EDITABLE = 'editable';
+const FIELD_TYPES = {
+    boolean: 'BOOLEAN',
+    array: 'ARRAY',
+    check: 'CHECK',
+    date: 'DATE',
+    daterange: 'DATERANGE',
+    time: 'TIME',
+    timerange: 'TIMERANGE',
+    map: 'MAP',
+    number: 'NUMBER',
+    decimal: 'DECIMAL',
+    currency: 'CURRENCY',
+    select: 'SELECT',
+    typeahead: 'TYPEAHEAD',
+    text: 'TEXT',
+    password: 'PASSWORD',
+    label: 'LABEL',
+    html: 'HTML',
+    title: 'TITLE',
+    message: 'MESSAGE',
+    link: 'LINK',
+    warning: 'WARNING',
+    avatar: 'AVATAR',
+    email: 'EMAIL',
+    phone: 'PHONE',
+};
+const FIELD_TYPES_FORMATS = {
+    EMAIL: new RegExp('^\\w+([\\.-]?\\w+)@\\w+([\\.-]?\\w+)(\\.\\w{2,3})+$'),
+};
+const INTRINSIC_ERROR_MESSAGES = {
+    EMAIL: `El valor no corresponde a un correo válido`,
+    DEFAULT: `El valor no se ajusta al formato establecido`,
+};
+const DEFAULT_ERROR_TYPE = 'error';
+const DEFAULT_CAPTURE_TYPE = 'INPUT';
+const DEFAULT_ALIGNMENT = 'left';
+const MONITORED_ATTRIBUTES = ['_maxLength', '_onValidation', 'captureType', 'fieldTitle', 'fieldType',
+    'errorMessage', 'errorType', 'errorCode', 'visibleLabel', 'fieldRequired', 'fieldOptions', '_fieldValue'];
 const STD_MAX_LENGTH = 50;
 const BIG_MAX_LENGTH = 500;
+const fldAttr = {
+    validateOnServer: 'validateOnServer',
+    value: '_fieldValue',
+    minValue: '_minValue',
+    maxValue: '_maxValue',
+    maxLength: '_maxLength',
+    onValidation: '_onValidation',
+    intrinsicErrorMessage: '_intrinsicErrorMessage',
+    code: 'fieldCode',
+    info: 'fieldInfo',
+    defaultValue: 'defaultValue',
+    defaultEditable: 'defaultEditable',
+    customAttributes: 'customAttributes',
+    visibleLabel: 'visibleLabel',
+    required: 'fieldRequired',
+    hasChanged: 'hasChanged',
+    outputOnly: 'outputOnly',
+    captureType: 'captureType',
+    title: 'fieldTitle',
+    type: 'fieldType',
+    alignment: 'fieldAlignment',
+    format: 'fieldFormat',
+    externalValue: 'externalValue',
+    tooltipText: 'tooltipText',
+    errorType: 'errorType',
+    errorCode: 'errorCode',
+    errorMessage: 'errorMessage',
+    options: 'fieldOptions',
+};
 class FieldDescriptor extends FormElement {
     constructor(inputFieldReceived) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         super(inputFieldReceived);
         this._editionFinish = new Subject();
         this._editionPartial = new Subject();
         this._detailRequest = new Subject();
-        this.type = componentConstants.ELEMENTTYPE_FIELD;
-        const fieldReceived = (inputFieldReceived) ? inputFieldReceived : {};
-        this.setEditable((_a = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.editable) !== null && _a !== void 0 ? _a : true);
-        this.fieldCode = fieldReceived.fieldCode;
-        this.fieldTitle = fieldReceived.fieldTitle || this.fieldCode;
-        this.captureType = fieldReceived.captureType || 'INPUT';
-        this.setFieldType(fieldReceived.fieldTypeCode);
-        this.defaultValue = fieldReceived.defaultValue || null;
-        this._maxLength = (_b = fieldReceived.maxLength) !== null && _b !== void 0 ? _b : (this.captureType === 'TEXTAREA' ? BIG_MAX_LENGTH : STD_MAX_LENGTH);
-        this.setValue(fieldReceived.fieldValue || this.defaultValue || '');
-        const defaultTypeAlignment = (tableFieldStyles[this.fieldType] != null) ? tableFieldStyles[this.fieldType]['text-align'] : 'left';
-        this.fieldAlignment = (fieldReceived.alignment != null) ? fieldReceived.alignment.toLowerCase() : defaultTypeAlignment;
-        this.fieldInfo = fieldReceived.info || '';
-        this.fieldFormat = fieldReceived.format || '';
-        this.validateOnServer = (_c = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.serverAction) !== null && _c !== void 0 ? _c : false;
-        this.customAttributes = (_d = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.customAttributes) !== null && _d !== void 0 ? _d : null;
-        this.setVisibility(fieldReceived.visible);
-        this.visibleLabel = (_e = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.visibleLabel) !== null && _e !== void 0 ? _e : true;
-        this.tooltipText = fieldReceived.tooltip || '';
-        this.defaultEditable = this.enabled;
-        this.fieldRequired = (_f = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.required) !== null && _f !== void 0 ? _f : false;
-        this.errorMessage = fieldReceived.errorMessage || '';
-        this.errorCode = fieldReceived.errorCode || '00';
-        this.outputOnly = (_g = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.outputOnly) !== null && _g !== void 0 ? _g : false;
-        this.setFieldOptions(fieldReceived.fieldOptions);
+        this._attributeChange = new Subject();
+        this.elementType = componentConstants.ELEMENTTYPE_FIELD;
+        const fld = (inputFieldReceived) ? inputFieldReceived : {};
+        this.setAttr(fldAttr.code, fld.fieldCode);
+        this.setAttr(fldAttr.title, (_a = fld.fieldTitle) !== null && _a !== void 0 ? _a : this.fieldCode);
+        this.setAttr(fldAttr.captureType, (_b = fld.captureType) !== null && _b !== void 0 ? _b : DEFAULT_CAPTURE_TYPE);
+        this.setAttr(fldAttr.defaultValue, (_c = fld.defaultValue) !== null && _c !== void 0 ? _c : null);
+        const defaultTypeAlignment = (tableFieldStyles[this.fieldType] != null)
+            ? tableFieldStyles[this.fieldType]['text-align'] : DEFAULT_ALIGNMENT;
+        const fieldAlignment = (fld.alignment != null) ? fld.alignment.toLowerCase() : defaultTypeAlignment;
+        this.setAttr(fldAttr.alignment, fieldAlignment);
+        this.setAttr(fldAttr.info, fld.info || '');
+        let fieldFormat;
+        try {
+            fieldFormat = (fld.format) ? new RegExp(fld.format) : null;
+        }
+        catch (e) {
+            fieldFormat = null;
+        }
+        this.setAttr(fldAttr.format, fieldFormat);
+        this.setAttr(fldAttr.validateOnServer, (_d = fld.serverAction) !== null && _d !== void 0 ? _d : false);
+        this.setAttr(fldAttr.customAttributes, (_e = fld.customAttributes) !== null && _e !== void 0 ? _e : {});
+        this.setAttr(fldAttr.tooltipText, fld.tooltip || '');
+        this.setAttr(fldAttr.defaultEditable, this.enabled);
+        this.setAttr(fldAttr.required, (_f = fld.required) !== null && _f !== void 0 ? _f : false);
+        this.setError(fld.errorCode, fld.errorMessage, (_g = fld.errorType) !== null && _g !== void 0 ? _g : DEFAULT_ERROR_TYPE);
+        this.setAttr(fldAttr.outputOnly, (_h = fld.outputOnly) !== null && _h !== void 0 ? _h : false);
+        const maxLength = (_j = fld.maxLength) !== null && _j !== void 0 ? _j : (this.captureType === 'TEXTAREA' ? BIG_MAX_LENGTH : STD_MAX_LENGTH);
+        this.setAttr(fldAttr.maxLength, maxLength);
+        this.setAttr(fldAttr.intrinsicErrorMessage, (_k = INTRINSIC_ERROR_MESSAGES[this.fieldType]) !== null && _k !== void 0 ? _k : INTRINSIC_ERROR_MESSAGES.DEFAULT);
+        this.setFieldType(fld.fieldTypeCode);
+        this.setEditable((_l = fld.editable) !== null && _l !== void 0 ? _l : true);
+        this.setVisibleLabel((_m = fld.visibleLabel) !== null && _m !== void 0 ? _m : true);
+        this.setVisibility(fld.visible);
+        this.setFieldOptions(fld.fieldOptions);
+        this.setValue(fld.fieldValue || this.defaultValue || '');
     }
     get name() { return this.fieldCode; }
     get editionFinish() { return this._editionFinish; }
+    get attributeChange() { return this._attributeChange; }
     get editionPartial() { return this._editionPartial; }
     get detailRequest() { return this._detailRequest; }
+    get validating() { return this._onValidation; }
+    set validating(isValidating) { this.setAttr(fldAttr.onValidation, isValidating); }
+    setIntrinsicErrorMessage(message) { this.setAttr(fldAttr.intrinsicErrorMessage, message); }
+    set intrinsicErrorMessage(message) { this.setIntrinsicErrorMessage(message); }
     get fieldValue() { return this.getValue(); }
     get required() { return this.fieldRequired; }
-    set required(required) { this.fieldRequired = required !== null && required !== void 0 ? required : false; }
+    set required(required) { this.setAttr(fldAttr.required, required !== null && required !== void 0 ? required : false); }
     get maxLength() { return (this._maxLength > 0) ? this._maxLength.toString() : ''; }
     set maxLength(requiredMaxLength) {
         if (typeof requiredMaxLength === 'string') {
-            this._maxLength = parseInt(requiredMaxLength, 10);
+            this.setAttr(fldAttr.maxLength, parseInt(requiredMaxLength, 10));
         }
         else if (typeof requiredMaxLength === 'number') {
-            this._maxLength = requiredMaxLength;
+            this.setAttr(fldAttr.maxLength, requiredMaxLength);
         }
     }
     get value() { return this.getValue(); }
     set value(newValue) { this.setValue(newValue); }
-    notifyEditionPartial() { this._editionPartial.next(this.fieldCode); }
-    notifyEditionFinish() { this._editionFinish.next(this.fieldCode); }
-    notifyEditionDetailRequest() { this._detailRequest.next(this.fieldCode); }
-    showLabel() { this.visibleLabel = true; }
-    hideLabel() { this.visibleLabel = false; }
-    changed() { this.hasChanged = true; }
+    notifyEditionPartial() {
+        const intrinsicValidation = true;
+        this._editionPartial.next({ code: this.fieldCode, intrinsicValidation });
+    }
+    notifyEditionFinish() {
+        var _a, _b, _c, _d;
+        let intrinsicValidation = true;
+        const fieldDefaultFormat = (_a = FIELD_TYPES_FORMATS === null || FIELD_TYPES_FORMATS === void 0 ? void 0 : FIELD_TYPES_FORMATS[this.fieldType]) !== null && _a !== void 0 ? _a : null;
+        const fieldValue = this.getValue();
+        if (fieldValue && (fieldDefaultFormat || this.fieldFormat)) {
+            intrinsicValidation = ((_b = fieldDefaultFormat === null || fieldDefaultFormat === void 0 ? void 0 : fieldDefaultFormat.test(fieldValue)) !== null && _b !== void 0 ? _b : true)
+                && ((_d = (_c = this.fieldFormat) === null || _c === void 0 ? void 0 : _c.test(fieldValue)) !== null && _d !== void 0 ? _d : true);
+            if (!intrinsicValidation) {
+                this.setError('99', this._intrinsicErrorMessage);
+            }
+        }
+        this._editionFinish.next({ code: this.fieldCode, intrinsicValidation });
+    }
+    setAttr(name, value) {
+        if (this[name]) {
+            this[name] = value;
+        }
+        if (MONITORED_ATTRIBUTES.includes(name)) {
+            this._attributeChange.next({ name, value });
+        }
+    }
+    notifyEditionDetailRequest() {
+        this._detailRequest.next(this.fieldCode);
+    }
+    setVisibleLabel(visibleLabel) { this.setAttr(fldAttr.visibleLabel, visibleLabel); }
+    showLabel() { this.setVisibleLabel(true); }
+    hideLabel() { this.setVisibleLabel(false); }
+    setChanged(hasChanged) { this.setAttr(fldAttr.hasChanged, hasChanged); }
+    changed() { this.setChanged(true); }
     getRawValue() { return this._fieldValue; }
-    setLabel(label) { this.fieldTitle = label; }
+    setLabel(label) { this.setAttr(fldAttr.title, label); }
     clean() { this.setValue(this.defaultValue || ''); }
     get backend() { return this.validateOnServer; }
-    setVisibleLabel(visibleLabel) { this.visibleLabel = visibleLabel; }
     setEditable(editable = true) { (editable) ? this.enable() : this.disable(); }
-    isEmpty() { return this.getValue() === '' || this.getValue() === undefined || this.getValue() === null; }
-    getErrorCode() { return this.errorCode; }
-    setErrorCode(code) { this.errorCode = code; }
-    getErrorMessage() { return this.errorMessage; }
-    setErrorMessage(msg) { this.errorMessage = msg; }
+    hasError() { return this.errorCode !== '00'; }
+    setError(code, message, type = DEFAULT_ERROR_TYPE) {
+        this.setAttr(fldAttr.errorCode, code !== null && code !== void 0 ? code : '00');
+        this.setAttr(fldAttr.errorType, (this.errorCode === '00') ? '' : type);
+        this.setAttr(fldAttr.errorMessage, message !== null && message !== void 0 ? message : '');
+    }
+    getError() { return { type: this.errorType, code: this.errorCode, message: this.errorMessage }; }
+    get error() { return this.getError(); }
+    set error(errorObj) { var _a; this.setError(errorObj.code, errorObj.message, (_a = errorObj.type) !== null && _a !== void 0 ? _a : DEFAULT_ERROR_TYPE); }
+    getErrorCode() { return this.getError().code; }
+    setErrorCode(code) { this.setError(code, this.errorMessage); }
+    getErrorMessage() { return this.getError().message; }
+    setErrorMessage(msg) { this.setError(this.errorCode, msg); }
+    isEmpty() {
+        const fieldCurrentValue = this.getValue();
+        if (fieldCurrentValue === undefined || fieldCurrentValue === null) {
+            return true;
+        }
+        if ((this.fieldType === FIELD_TYPES.array || this.fieldType === FIELD_TYPES.phone)
+            && Array.isArray(fieldCurrentValue) && fieldCurrentValue.length === 0) {
+            return true;
+        }
+        ;
+        return fieldCurrentValue === '';
+    }
     getValue() {
         var _a;
         switch (this.fieldType) {
@@ -1435,68 +1593,39 @@ class FieldDescriptor extends FormElement {
     }
     updateFromServer(fld) {
         var _a;
-        if (FIELD_VISIBLE in fld) {
-            this.setVisibility(fld.visible);
-        }
-        if (FIELD_LABEL_VISIBLE in fld) {
-            this.setVisibleLabel(fld.visibleLabel);
-        }
-        if (FIELD_REQUIRED in fld) {
-            this.fieldRequired = (_a = fld.required) !== null && _a !== void 0 ? _a : false;
-        }
-        if (FIELD_ERR_CODE in fld) {
-            (this.errorCode = fld.errorCode);
-        }
-        if (FIELD_ERR_MSG in fld) {
-            (this.errorMessage = fld.errorMessage);
-        }
-        if (FIELD_TOOLTIP in fld) {
-            (this.tooltipText = fld.tooltip);
-        }
-        if (FIELD_INFO in fld) {
-            (this.fieldInfo = fld.info);
-        }
-        if (FIELD_EDITABLE in fld) {
-            this.setEditable(fld.editable);
-        }
-        if (FIELD_TITLE in fld) {
-            this.setLabel(fld.fieldTitle.toString());
-        }
-        if (FIELD_VALUE in fld) {
-            this.hasChanged = false;
-            this.setValue(fld.fieldValue);
-        }
-        if (FIELD_OPTIONS in fld) {
-            this.setFieldOptions(fld.fieldOptions);
-        }
-        if (FIELD_CAPTURE_TYPE in fld) {
-            this.captureType = fld.captureType || 'INPUT';
-        }
-        if (FIELD_TYPE in fld) {
-            this.setFieldType(fld.fieldTypeCode);
-        }
-        if (FIELD_MAX_LENGTH in fld) {
-            this.maxLength = fld.maxLength;
+        const fieldKeys = Object.keys(fld);
+        for (let index = 0; index < fieldKeys.length; index++) {
+            const attrName = fieldKeys[index];
+            const attrValue = fld[attrName];
+            (attrName === FIELD_VISIBLE) && this.setVisibility(attrValue);
+            (attrName === FIELD_LABEL_VISIBLE) && this.setVisibleLabel(fld.visibleLabel);
+            (attrName === FIELD_REQUIRED) && this.setAttr(fldAttr.required, (_a = fld.required) !== null && _a !== void 0 ? _a : false);
+            (attrName === FIELD_ERR_CODE) && this.setAttr(fldAttr.errorCode, fld.errorCode);
+            (attrName === FIELD_ERR_MSG) && this.setAttr(fldAttr.errorMessage, fld.errorMessage);
+            (attrName === FIELD_TOOLTIP) && this.setAttr(fldAttr.tooltipText, fld.tooltip);
+            (attrName === FIELD_INFO) && this.setAttr(fldAttr.info, fld.info);
+            (attrName === FIELD_EDITABLE) && this.setEditable(fld.editable);
+            (attrName === FIELD_TITLE) && this.setLabel(fld.fieldTitle.toString());
+            (attrName === FIELD_VALUE) && (this.setValue(fld._fieldValue) && this.setChanged(false));
+            (attrName === FIELD_OPTIONS) && this.setFieldOptions(fld.fieldOptions);
+            (attrName === FIELD_CAPTURE_TYPE) && this.setAttr(fldAttr.captureType, fld.captureType || 'INPUT');
+            (attrName === FIELD_TYPE) && this.setFieldType(fld.fieldTypeCode);
+            (attrName === FIELD_MAX_LENGTH) && this.setAttr(fldAttr.maxLength, fld.maxLength);
         }
     }
     setFieldType(inputFieldType) {
-        this.fieldType = inputFieldType;
-        /**
-         *  Se elimina la validación de que sea un tipo conocido
-         *  this.fieldType = (inputFieldType && FIELDTYPES.includes(inputFieldType))
-         *   ? inputFieldType : componentConstants.FIELDTYPE_TEXT;
-         */
+        this.setAttr(fldAttr.type, inputFieldType);
     }
     format() {
         if (this.fieldType === componentConstants.FIELDTYPE_CURRENCY) {
-            this._fieldValue = formatCurrency(this._fieldValue);
+            this.setAttr(fldAttr.value, formatCurrency(this._fieldValue));
         }
     }
     setMinValue(minValue) {
         var _a, _b, _c;
         if (this.fieldType === componentConstants.FIELDTYPE_DATE
             && ((_a = this.widget) === null || _a === void 0 ? void 0 : _a.setMinValue)) {
-            this._minValue = minValue;
+            this.setAttr(fldAttr.minValue, minValue);
             if (!minValue) {
                 (_b = this.widget) === null || _b === void 0 ? void 0 : _b.setMinValue(false);
             }
@@ -1510,7 +1639,7 @@ class FieldDescriptor extends FormElement {
         var _a, _b, _c;
         if (this.fieldType === componentConstants.FIELDTYPE_DATE
             && ((_a = this.widget) === null || _a === void 0 ? void 0 : _a.setMaxValue)) {
-            this._maxValue = maxValue;
+            this.setAttr(fldAttr.maxValue, maxValue);
             if (!maxValue) {
                 (_b = this.widget) === null || _b === void 0 ? void 0 : _b.setMaxValue(false);
             }
@@ -1530,21 +1659,23 @@ class FieldDescriptor extends FormElement {
             || !Array.isArray(newOptions)) {
             return;
         }
-        const fieldOptions = newOptions.map(option => {
+        let fieldOptions = newOptions.map(option => {
             if (option.text !== undefined && option.text !== null
                 && option.value !== undefined && option.value !== null) {
                 return { fieldOptionValue: option.text, fieldOptionId: option.value };
             }
             return Object.assign({}, option);
         });
-        this.fieldOptions = (fieldOptions && Array.isArray(fieldOptions)
+        fieldOptions = (fieldOptions && Array.isArray(fieldOptions)
             && fieldOptions.length > 0) ? fieldOptions : [];
+        this.setAttr(fldAttr.options, fieldOptions);
         if (this.fieldType === componentConstants.FIELDTYPE_ARRAY && this.widget) {
             return (_a = this.widget) === null || _a === void 0 ? void 0 : _a.refereshContent();
         }
         if (this._fieldValue) {
             if (this.fieldType === componentConstants.FIELDTYPE_ARRAY && Array.isArray(this._fieldValue)) {
-                this._fieldValue = (_b = this._fieldValue) === null || _b === void 0 ? void 0 : _b.filter(item => this.fieldOptions.find(opt => opt.fieldOptionId === item));
+                const fieldValue = (_b = this._fieldValue) === null || _b === void 0 ? void 0 : _b.filter(item => this.fieldOptions.find(opt => opt.fieldOptionId === item));
+                this.setAttr(fldAttr.value, fieldValue);
             }
             else {
                 const valInOptions = this.fieldOptions
@@ -1564,7 +1695,7 @@ class FieldDescriptor extends FormElement {
     setValue(newValue, widgetUpdate = true) {
         var _a;
         if (typeof newValue === UNDEFINED || newValue === null) {
-            return;
+            return true;
         }
         let newFinalValue;
         switch (this.fieldType) {
@@ -1604,9 +1735,10 @@ class FieldDescriptor extends FormElement {
                 break;
         }
         if (this._fieldValue !== newFinalValue) {
-            this.hasChanged = true;
-            this._fieldValue = newFinalValue;
+            this.setChanged(true);
+            this.setAttr(fldAttr.value, newFinalValue);
         }
+        return true;
     }
 }
 
@@ -1976,6 +2108,14 @@ class FormStructureAndData {
         const fieldObject = this.getFieldObject(fieldCode);
         return (fieldObject) ? fieldObject.setValue(fieldValue) : null;
     }
+    setFieldError(code, message, type = 'error') {
+        const fieldObject = this.getFieldObject(code);
+        return (fieldObject) ? fieldObject.setError(code, message, type) : null;
+    }
+    setFieldIntrinsicErrorMessage(code, message) {
+        const fieldObject = this.getFieldObject(code);
+        return (fieldObject) ? fieldObject.setIntrinsicErrorMessage(message) : null;
+    }
     setFieldRequired(fieldCode, required) {
         const fieldObject = this.getFieldObject(fieldCode);
         return (fieldObject) ? fieldObject.required = required : null;
@@ -2356,6 +2496,8 @@ class BasicFormComponent {
     setFieldValue(fieldCode, fieldValue) { return this.formStructure.setFieldValue(fieldCode, fieldValue); }
     setFieldRequired(fieldCode, required) { return this.formStructure.setFieldRequired(fieldCode, required); }
     setFieldErrorMessage(fieldCode, errorMessage) { return this.formStructure.setFieldErrorMessage(fieldCode, errorMessage); }
+    setFieldError(code, message, type = 'error') { return this.formStructure.setFieldError(code, message, type); }
+    setFieldIntrinsicErrorMessage(code, message) { return this.formStructure.setFieldIntrinsicErrorMessage(code, message); }
     setFieldOptions(fieldCode, optionsArray, idAttribute, nameAttribute) {
         return this.formStructure.setFieldOptions(fieldCode, optionsArray, idAttribute, nameAttribute);
     }
@@ -2548,8 +2690,14 @@ class BasicFormComponent {
         const formFields = this.formStructure.getFields();
         if (Array.isArray(formFields)) {
             formFields.forEach(field => {
-                field.editionFinish.subscribe(code => this.startFieldValidation(code));
-                field.editionPartial.subscribe(code => this.startFieldInputValidation(code));
+                field.editionFinish.subscribe(event => {
+                    const { code, intrinsicValidation } = event;
+                    this.startFieldValidation(code, intrinsicValidation);
+                });
+                field.editionPartial.subscribe(event => {
+                    const { code, intrinsicValidation } = event;
+                    this.startFieldInputValidation(code, intrinsicValidation);
+                });
                 field.detailRequest.subscribe(code => this.showFieldInfo(code));
             });
         }
@@ -2860,7 +3008,7 @@ class BasicFormComponent {
             this.fieldValidationsFinish[fieldCode].push(callbackMethod);
         });
     }
-    startFieldInputValidation(fieldCode) {
+    startFieldInputValidation(fieldCode, intrinsicValidation = true) {
         return __awaiter(this, void 0, void 0, function* () {
             const fieldToValidate = this.getFieldObject(fieldCode);
             if (!fieldToValidate) {
@@ -2879,10 +3027,10 @@ class BasicFormComponent {
             }
         });
     }
-    startFieldValidation(fieldCode) {
+    startFieldValidation(fieldCode, intrinsicValidation = true) {
         return __awaiter(this, void 0, void 0, function* () {
             const fieldToValidate = this.getField(fieldCode);
-            if (!fieldToValidate) {
+            if (!fieldToValidate || !intrinsicValidation) {
                 return;
             }
             fieldToValidate.setErrorMessage('');
@@ -2910,6 +3058,7 @@ class BasicFormComponent {
             let finish = true;
             let validationResult = null;
             if (fieldObj.backend) {
+                fieldObj.validating = true;
                 validationResult = yield this
                     .requestFormAction(componentConstants.FORMACTION_VALIDATE, fieldObj.fieldCode);
                 finish = !this.errorOccured();
@@ -2922,6 +3071,7 @@ class BasicFormComponent {
                 fieldObj.setErrorMessage(this.errorMessage);
                 this.displayValidationServerError();
             }
+            fieldObj.validating = false;
         });
     }
     finishFieldValidation(fieldObject, validationResult) {