tuain-ng-forms-lib 0.12.20 → 0.12.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/tuain-ng-forms-lib.umd.js +128 -17
- package/bundles/tuain-ng-forms-lib.umd.js.map +1 -1
- package/esm2015/lib/classes/forms/field.js +85 -12
- package/esm2015/lib/classes/forms/form.js +9 -1
- package/esm2015/lib/components/forms/basic-form.js +16 -6
- package/fesm2015/tuain-ng-forms-lib.js +107 -16
- package/fesm2015/tuain-ng-forms-lib.js.map +1 -1
- package/lib/classes/forms/field.d.ts +26 -3
- package/lib/classes/forms/form.d.ts +2 -0
- package/lib/components/forms/basic-form.d.ts +4 -2
- package/package.json +1 -1
- package/tuain-ng-forms-lib.metadata.json +1 -1
|
@@ -1349,11 +1349,38 @@ const FIELD_ERR_MSG = 'errorMessage';
|
|
|
1349
1349
|
const FIELD_TOOLTIP = 'tooltipText';
|
|
1350
1350
|
const FIELD_INFO = 'info';
|
|
1351
1351
|
const FIELD_EDITABLE = 'editable';
|
|
1352
|
+
const EMAIL_FORMAT = '^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$';
|
|
1353
|
+
// Norbey ".+@([\da-z\.-]+)\.([a-z\.]{2,6})"
|
|
1354
|
+
const FIELD_TYPES = {
|
|
1355
|
+
array: 'ARRAY',
|
|
1356
|
+
check: 'CHECK',
|
|
1357
|
+
date: 'DATE',
|
|
1358
|
+
daterange: 'DATERANGE',
|
|
1359
|
+
time: 'TIME',
|
|
1360
|
+
timerange: 'TIMERANGE',
|
|
1361
|
+
map: 'MAP',
|
|
1362
|
+
number: 'NUMBER',
|
|
1363
|
+
decimal: 'DECIMAL',
|
|
1364
|
+
currency: 'CURRENCY',
|
|
1365
|
+
select: 'SELECT',
|
|
1366
|
+
typeahead: 'TYPEAHEAD',
|
|
1367
|
+
text: 'TEXT',
|
|
1368
|
+
password: 'PASSWORD',
|
|
1369
|
+
label: 'LABEL',
|
|
1370
|
+
html: 'HTML',
|
|
1371
|
+
title: 'TITLE',
|
|
1372
|
+
message: 'MESSAGE',
|
|
1373
|
+
link: 'LINK',
|
|
1374
|
+
warning: 'WARNING',
|
|
1375
|
+
avatar: 'AVATAR',
|
|
1376
|
+
email: 'EMAIL',
|
|
1377
|
+
phone: 'PHONE',
|
|
1378
|
+
};
|
|
1352
1379
|
const STD_MAX_LENGTH = 50;
|
|
1353
1380
|
const BIG_MAX_LENGTH = 500;
|
|
1354
1381
|
class FieldDescriptor extends FormElement {
|
|
1355
1382
|
constructor(inputFieldReceived) {
|
|
1356
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
1383
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
1357
1384
|
super(inputFieldReceived);
|
|
1358
1385
|
this._editionFinish = new Subject();
|
|
1359
1386
|
this._editionPartial = new Subject();
|
|
@@ -1380,14 +1407,21 @@ class FieldDescriptor extends FormElement {
|
|
|
1380
1407
|
this.defaultEditable = this.enabled;
|
|
1381
1408
|
this.fieldRequired = (_f = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.required) !== null && _f !== void 0 ? _f : false;
|
|
1382
1409
|
this.errorMessage = fieldReceived.errorMessage || '';
|
|
1383
|
-
this.errorCode = fieldReceived.errorCode
|
|
1384
|
-
this.outputOnly = (
|
|
1410
|
+
this.errorCode = (_g = fieldReceived.errorCode) !== null && _g !== void 0 ? _g : '00';
|
|
1411
|
+
this.outputOnly = (_h = fieldReceived === null || fieldReceived === void 0 ? void 0 : fieldReceived.outputOnly) !== null && _h !== void 0 ? _h : false;
|
|
1385
1412
|
this.setFieldOptions(fieldReceived.fieldOptions);
|
|
1413
|
+
this._intrinsicErrorMessage = (this.fieldType === FIELD_TYPES.email)
|
|
1414
|
+
? `El valor de ${this.fieldTitle} no corresponde a un correo válido`
|
|
1415
|
+
: `El valor de ${this.fieldTitle} no se ajusta al formato establecido`;
|
|
1386
1416
|
}
|
|
1387
1417
|
get name() { return this.fieldCode; }
|
|
1388
1418
|
get editionFinish() { return this._editionFinish; }
|
|
1389
1419
|
get editionPartial() { return this._editionPartial; }
|
|
1390
1420
|
get detailRequest() { return this._detailRequest; }
|
|
1421
|
+
get validating() { return this._onValidation; }
|
|
1422
|
+
set validating(isValidating) { this._onValidation = isValidating; }
|
|
1423
|
+
setIntrinsicErrorMessage(message) { this._intrinsicErrorMessage = message; }
|
|
1424
|
+
set intrinsicErrorMessage(message) { this.setIntrinsicErrorMessage(message); }
|
|
1391
1425
|
get fieldValue() { return this.getValue(); }
|
|
1392
1426
|
get required() { return this.fieldRequired; }
|
|
1393
1427
|
set required(required) { this.fieldRequired = required !== null && required !== void 0 ? required : false; }
|
|
@@ -1402,9 +1436,29 @@ class FieldDescriptor extends FormElement {
|
|
|
1402
1436
|
}
|
|
1403
1437
|
get value() { return this.getValue(); }
|
|
1404
1438
|
set value(newValue) { this.setValue(newValue); }
|
|
1405
|
-
notifyEditionPartial() {
|
|
1406
|
-
|
|
1407
|
-
|
|
1439
|
+
notifyEditionPartial() {
|
|
1440
|
+
const intrinsicValidation = true;
|
|
1441
|
+
this._editionPartial.next({ code: this.fieldCode, intrinsicValidation });
|
|
1442
|
+
}
|
|
1443
|
+
notifyEditionFinish() {
|
|
1444
|
+
let intrinsicValidation = true;
|
|
1445
|
+
const fieldExpression = (this.fieldType === FIELD_TYPES.email) ? EMAIL_FORMAT : this.fieldFormat;
|
|
1446
|
+
const fieldFormat = new RegExp(fieldExpression);
|
|
1447
|
+
const fieldValue = this.getValue();
|
|
1448
|
+
if (fieldValue && fieldFormat) {
|
|
1449
|
+
intrinsicValidation = fieldFormat.test(fieldValue);
|
|
1450
|
+
if (!intrinsicValidation) {
|
|
1451
|
+
const message = (this.fieldType === FIELD_TYPES.email)
|
|
1452
|
+
? `El valor de ${this.fieldTitle} no corresponde a un correo válido`
|
|
1453
|
+
: `El valor de ${this.fieldTitle} no se ajusta al formato establecido`;
|
|
1454
|
+
this.setError('99', message);
|
|
1455
|
+
}
|
|
1456
|
+
}
|
|
1457
|
+
this._editionFinish.next({ code: this.fieldCode, intrinsicValidation });
|
|
1458
|
+
}
|
|
1459
|
+
notifyEditionDetailRequest() {
|
|
1460
|
+
this._detailRequest.next(this.fieldCode);
|
|
1461
|
+
}
|
|
1408
1462
|
showLabel() { this.visibleLabel = true; }
|
|
1409
1463
|
hideLabel() { this.visibleLabel = false; }
|
|
1410
1464
|
changed() { this.hasChanged = true; }
|
|
@@ -1414,11 +1468,30 @@ class FieldDescriptor extends FormElement {
|
|
|
1414
1468
|
get backend() { return this.validateOnServer; }
|
|
1415
1469
|
setVisibleLabel(visibleLabel) { this.visibleLabel = visibleLabel; }
|
|
1416
1470
|
setEditable(editable = true) { (editable) ? this.enable() : this.disable(); }
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1471
|
+
setError(code, message, type = 'error') {
|
|
1472
|
+
this.errorType = (code === '00') ? '' : type;
|
|
1473
|
+
this.errorCode = code;
|
|
1474
|
+
this.errorMessage = message;
|
|
1475
|
+
}
|
|
1476
|
+
getError() { return { type: this.errorType, code: this.errorCode, message: this.errorMessage }; }
|
|
1477
|
+
get error() { return this.getError(); }
|
|
1478
|
+
set error(errorObj) { this.setError(errorObj.code, errorObj.message, errorObj.type); }
|
|
1479
|
+
getErrorCode() { return this.getError().code; }
|
|
1480
|
+
setErrorCode(code) { this.setError(code, this.errorMessage); }
|
|
1481
|
+
getErrorMessage() { return this.getError().message; }
|
|
1482
|
+
setErrorMessage(msg) { this.setError(this.errorCode, msg); }
|
|
1483
|
+
isEmpty() {
|
|
1484
|
+
const fieldCurrentValue = this.getValue();
|
|
1485
|
+
if (fieldCurrentValue === undefined || fieldCurrentValue === null) {
|
|
1486
|
+
return true;
|
|
1487
|
+
}
|
|
1488
|
+
if ((this.fieldType === FIELD_TYPES.array || this.fieldType === FIELD_TYPES.phone)
|
|
1489
|
+
&& Array.isArray(fieldCurrentValue) && fieldCurrentValue.length === 0) {
|
|
1490
|
+
return true;
|
|
1491
|
+
}
|
|
1492
|
+
;
|
|
1493
|
+
return fieldCurrentValue === '';
|
|
1494
|
+
}
|
|
1422
1495
|
getValue() {
|
|
1423
1496
|
var _a;
|
|
1424
1497
|
switch (this.fieldType) {
|
|
@@ -1976,6 +2049,14 @@ class FormStructureAndData {
|
|
|
1976
2049
|
const fieldObject = this.getFieldObject(fieldCode);
|
|
1977
2050
|
return (fieldObject) ? fieldObject.setValue(fieldValue) : null;
|
|
1978
2051
|
}
|
|
2052
|
+
setFieldError(code, message, type = 'error') {
|
|
2053
|
+
const fieldObject = this.getFieldObject(code);
|
|
2054
|
+
return (fieldObject) ? fieldObject.setError(code, message, type) : null;
|
|
2055
|
+
}
|
|
2056
|
+
setFieldIntrinsicErrorMessage(code, message) {
|
|
2057
|
+
const fieldObject = this.getFieldObject(code);
|
|
2058
|
+
return (fieldObject) ? fieldObject.setIntrinsicErrorMessage(message) : null;
|
|
2059
|
+
}
|
|
1979
2060
|
setFieldRequired(fieldCode, required) {
|
|
1980
2061
|
const fieldObject = this.getFieldObject(fieldCode);
|
|
1981
2062
|
return (fieldObject) ? fieldObject.required = required : null;
|
|
@@ -2356,6 +2437,8 @@ class BasicFormComponent {
|
|
|
2356
2437
|
setFieldValue(fieldCode, fieldValue) { return this.formStructure.setFieldValue(fieldCode, fieldValue); }
|
|
2357
2438
|
setFieldRequired(fieldCode, required) { return this.formStructure.setFieldRequired(fieldCode, required); }
|
|
2358
2439
|
setFieldErrorMessage(fieldCode, errorMessage) { return this.formStructure.setFieldErrorMessage(fieldCode, errorMessage); }
|
|
2440
|
+
setFieldError(code, message, type = 'error') { return this.formStructure.setFieldError(code, message, type); }
|
|
2441
|
+
setFieldIntrinsicErrorMessage(code, message) { return this.formStructure.setFieldIntrinsicErrorMessage(code, message); }
|
|
2359
2442
|
setFieldOptions(fieldCode, optionsArray, idAttribute, nameAttribute) {
|
|
2360
2443
|
return this.formStructure.setFieldOptions(fieldCode, optionsArray, idAttribute, nameAttribute);
|
|
2361
2444
|
}
|
|
@@ -2548,8 +2631,14 @@ class BasicFormComponent {
|
|
|
2548
2631
|
const formFields = this.formStructure.getFields();
|
|
2549
2632
|
if (Array.isArray(formFields)) {
|
|
2550
2633
|
formFields.forEach(field => {
|
|
2551
|
-
field.editionFinish.subscribe(
|
|
2552
|
-
|
|
2634
|
+
field.editionFinish.subscribe(event => {
|
|
2635
|
+
const { code, intrinsicValidation } = event;
|
|
2636
|
+
this.startFieldValidation(code, intrinsicValidation);
|
|
2637
|
+
});
|
|
2638
|
+
field.editionPartial.subscribe(event => {
|
|
2639
|
+
const { code, intrinsicValidation } = event;
|
|
2640
|
+
this.startFieldInputValidation(code, intrinsicValidation);
|
|
2641
|
+
});
|
|
2553
2642
|
field.detailRequest.subscribe(code => this.showFieldInfo(code));
|
|
2554
2643
|
});
|
|
2555
2644
|
}
|
|
@@ -2860,7 +2949,7 @@ class BasicFormComponent {
|
|
|
2860
2949
|
this.fieldValidationsFinish[fieldCode].push(callbackMethod);
|
|
2861
2950
|
});
|
|
2862
2951
|
}
|
|
2863
|
-
startFieldInputValidation(fieldCode) {
|
|
2952
|
+
startFieldInputValidation(fieldCode, intrinsicValidation = true) {
|
|
2864
2953
|
return __awaiter(this, void 0, void 0, function* () {
|
|
2865
2954
|
const fieldToValidate = this.getFieldObject(fieldCode);
|
|
2866
2955
|
if (!fieldToValidate) {
|
|
@@ -2879,10 +2968,10 @@ class BasicFormComponent {
|
|
|
2879
2968
|
}
|
|
2880
2969
|
});
|
|
2881
2970
|
}
|
|
2882
|
-
startFieldValidation(fieldCode) {
|
|
2971
|
+
startFieldValidation(fieldCode, intrinsicValidation = true) {
|
|
2883
2972
|
return __awaiter(this, void 0, void 0, function* () {
|
|
2884
2973
|
const fieldToValidate = this.getField(fieldCode);
|
|
2885
|
-
if (!fieldToValidate) {
|
|
2974
|
+
if (!fieldToValidate || !intrinsicValidation) {
|
|
2886
2975
|
return;
|
|
2887
2976
|
}
|
|
2888
2977
|
fieldToValidate.setErrorMessage('');
|
|
@@ -2910,6 +2999,7 @@ class BasicFormComponent {
|
|
|
2910
2999
|
let finish = true;
|
|
2911
3000
|
let validationResult = null;
|
|
2912
3001
|
if (fieldObj.backend) {
|
|
3002
|
+
fieldObj.validating = true;
|
|
2913
3003
|
validationResult = yield this
|
|
2914
3004
|
.requestFormAction(componentConstants.FORMACTION_VALIDATE, fieldObj.fieldCode);
|
|
2915
3005
|
finish = !this.errorOccured();
|
|
@@ -2922,6 +3012,7 @@ class BasicFormComponent {
|
|
|
2922
3012
|
fieldObj.setErrorMessage(this.errorMessage);
|
|
2923
3013
|
this.displayValidationServerError();
|
|
2924
3014
|
}
|
|
3015
|
+
fieldObj.validating = false;
|
|
2925
3016
|
});
|
|
2926
3017
|
}
|
|
2927
3018
|
finishFieldValidation(fieldObject, validationResult) {
|