@ngx-formly/core 7.0.1 → 8.0.0

package/README.md

@@ -57,6 +57,7 @@ Formly is a dynamic (JSON powered) form library for Angular that brings unmatche
 
 | Angular version | Formly version         |
 | --------------- | ---------------------- |
+| Angular >= 19   | `@ngx-formly/core@8.x` |
 | Angular >= 18   | `@ngx-formly/core@7.x` |
 | Angular >= 13   | `@ngx-formly/core@6.x` |
 | Angular >= 7    | `@ngx-formly/core@5.x` |
@@ -65,6 +66,15 @@ Formly is a dynamic (JSON powered) form library for Angular that brings unmatche
 | Angular >= 4    | `@ngx-formly/core@2.x` |
 | Angular >= 2    | `ng-formly@1.x`        |
 
+#### Upgrading to v8
+
+Formly v8 requires Angular 19 or newer. Upgrade Angular first, then update all
+`@ngx-formly/*` packages used by your application together to v8.
+The Material, PrimeNG, and NG-ZORRO integrations require version 19 or newer of
+their respective UI libraries. Applications staying on Angular 18 should use Formly v7.
+
+See the [changelog](CHANGELOG.md) for the full list of changes.
+
 ## Core Team
 
 <table>

package/fesm2022/ngx-formly-core-json-schema.mjs

@@ -272,6 +272,46 @@ class FormlyJsonschema {
                 if (schema.anyOf) {
                     field.fieldGroup.push(this.resolveMultiSchema('anyOf', schema.anyOf, options));
                 }
+                // Process if/then/else conditional schemas
+                if (options.conditionalSchemas) {
+                    const conditionalSchemas = options.conditionalSchemas;
+                    conditionalSchemas.forEach((conditionalSchema) => {
+                        const condition = conditionalSchema._ifCondition;
+                        if (condition && conditionalSchema.properties) {
+                            // Create a field group with the conditional fields
+                            const conditionalFieldGroup = {
+                                fieldGroup: [],
+                                expressions: {
+                                    hide: (f) => {
+                                        if (!f.model) {
+                                            return true;
+                                        }
+                                        const modelValue = f.model[condition.property];
+                                        const matches = modelValue === condition.value;
+                                        // If negate is true (for "else" case), invert the condition
+                                        return condition.negate ? matches : !matches;
+                                    },
+                                },
+                            };
+                            // Add each property from the conditional schema to the field group
+                            Object.keys(conditionalSchema.properties).forEach((property) => {
+                                const propSchema = conditionalSchema.properties[property];
+                                if (!propSchema) {
+                                    return;
+                                }
+                                const isRequired = Array.isArray(conditionalSchema.required) && conditionalSchema.required.indexOf(property) !== -1;
+                                const conditionalField = this._toFieldConfig(propSchema, {
+                                    ...options,
+                                    key: property,
+                                    isOptional: !isRequired,
+                                    resetOnHide: true,
+                                });
+                                conditionalFieldGroup.fieldGroup.push(conditionalField);
+                            });
+                            field.fieldGroup.push(conditionalFieldGroup);
+                        }
+                    });
+                }
                 break;
             }
             case 'array': {
@@ -378,7 +418,7 @@ class FormlyJsonschema {
         if (schema.anyOf && !field.type) {
             delete field.key;
             field.fieldGroup = [
-                this.resolveMultiSchema('oneOf', schema.anyOf, { ...options, key, shareFormControl: false }),
+                this.resolveMultiSchema('anyOf', schema.anyOf, { ...options, key, shareFormControl: false }),
             ];
         }
         // map in possible formlyConfig options from the widget property
@@ -397,6 +437,14 @@ class FormlyJsonschema {
         if (schema && schema.allOf) {
             schema = this.resolveAllOf(schema, options);
         }
+        // Process if/then/else and store conditionals in options for later processing
+        if (schema && (schema.if || schema.then || schema.else)) {
+            const conditionalSchemas = this.resolveIfThenElse(schema, options);
+            if (conditionalSchemas.length > 0) {
+                // Store conditional schemas in options for processing in _toFieldConfig
+                options.conditionalSchemas = conditionalSchemas;
+            }
+        }
         return schema;
     }
     resolveAllOf({ allOf, ...baseSchema }, options) {
@@ -427,6 +475,55 @@ class FormlyJsonschema {
         }, baseSchema);
     }
     resolveMultiSchema(mode, schemas, options) {
+        const isRecursive = this.isRecursiveMultiSchema(schemas, options);
+        const fieldGroup = schemas.map((s, i) => {
+            const expressions = {
+                hide: (f, forceUpdate) => {
+                    if (options.skipMultiSchemaValidation) {
+                        return true;
+                    }
+                    const control = f.parent.parent.fieldGroup[0].formControl;
+                    if (control.value === -1 || forceUpdate) {
+                        let value = f.parent.fieldGroup
+                            .map((f, i) => [f, i, this.isFieldValid(f, i, schemas, options, isRecursive)])
+                            .sort(([f1, i1, f1Valid], [f2, i2, f2Valid]) => {
+                            if (f1Valid !== f2Valid) {
+                                return f2Valid ? 1 : -1;
+                            }
+                            const schemaField1 = isRecursive ? this.getSchemaField(schemas[i1]) || f1 : f1;
+                            const schemaField2 = isRecursive ? this.getSchemaField(schemas[i2]) || f2 : f2;
+                            const matchedFields1 = totalMatchedFields(schemaField1);
+                            const matchedFields2 = totalMatchedFields(schemaField2);
+                            if (matchedFields1 === matchedFields2) {
+                                if (schemaField1.props?.disabled === schemaField2.props?.disabled) {
+                                    return 0;
+                                }
+                                return matchedFields2 > matchedFields1 ? 1 : -1;
+                            }
+                            return matchedFields2 > matchedFields1 ? 1 : -1;
+                        })
+                            .map(([, i]) => i);
+                        if (mode === 'anyOf') {
+                            const definedValue = value.filter((i) => totalMatchedFields(f.parent.fieldGroup[i]));
+                            value = definedValue.length > 0 ? definedValue : [value[0] || 0];
+                        }
+                        value = value.length > 0 ? value : [0];
+                        control.setValue(mode === 'anyOf' ? value : value[0]);
+                    }
+                    const hide = Array.isArray(control.value) ? control.value.indexOf(i) === -1 : control.value !== i;
+                    if (isRecursive && !hide) {
+                        this.ensureMultiSchemaField(f, s, options);
+                    }
+                    return hide;
+                },
+            };
+            return isRecursive
+                ? this.createMultiSchemaField(s, options, expressions)
+                : {
+                    ...this._toFieldConfig(s, { ...options, resetOnHide: true }),
+                    expressions,
+                };
+        });
         return {
             type: 'multischema',
             fieldGroup: [
@@ -442,44 +539,114 @@ class FormlyJsonschema {
                     },
                 },
                 {
-                    fieldGroup: schemas.map((s, i) => ({
-                        ...this._toFieldConfig(s, { ...options, resetOnHide: true }),
-                        expressions: {
-                            hide: (f, forceUpdate) => {
-                                const control = f.parent.parent.fieldGroup[0].formControl;
-                                if (control.value === -1 || forceUpdate) {
-                                    let value = f.parent.fieldGroup
-                                        .map((f, i) => [f, i, this.isFieldValid(f, i, schemas, options)])
-                                        .sort(([f1, , f1Valid], [f2, , f2Valid]) => {
-                                        if (f1Valid !== f2Valid) {
-                                            return f2Valid ? 1 : -1;
-                                        }
-                                        const matchedFields1 = totalMatchedFields(f1);
-                                        const matchedFields2 = totalMatchedFields(f2);
-                                        if (matchedFields1 === matchedFields2) {
-                                            if (f1.props.disabled === f2.props.disabled) {
-                                                return 0;
-                                            }
-                                            return matchedFields2 > matchedFields1 ? 1 : -1;
-                                        }
-                                        return matchedFields2 > matchedFields1 ? 1 : -1;
-                                    })
-                                        .map(([, i]) => i);
-                                    if (mode === 'anyOf') {
-                                        const definedValue = value.filter((i) => totalMatchedFields(f.parent.fieldGroup[i]));
-                                        value = definedValue.length > 0 ? definedValue : [value[0] || 0];
-                                    }
-                                    value = value.length > 0 ? value : [0];
-                                    control.setValue(mode === 'anyOf' ? value : value[0]);
-                                }
-                                return Array.isArray(control.value) ? control.value.indexOf(i) === -1 : control.value !== i;
-                            },
-                        },
-                    })),
+                    fieldGroup,
                 },
             ],
         };
     }
+    createMultiSchemaField(schema, options, expressions) {
+        return {
+            expressions,
+            hooks: {
+                onInit: (f) => {
+                    if (f.hide === false) {
+                        this.ensureMultiSchemaField(f, schema, options);
+                    }
+                },
+            },
+        };
+    }
+    ensureMultiSchemaField(field, schema, options) {
+        if (field._jsonSchemaFormlyField) {
+            return;
+        }
+        const expressions = field.expressions;
+        const hooks = field.hooks;
+        const mutableField = field;
+        delete mutableField['formControl'];
+        delete mutableField['_keyPath'];
+        Object.keys(field).forEach((prop) => {
+            delete mutableField[prop];
+        });
+        Object.assign(field, this._toFieldConfig(schema, { ...options, resetOnHide: true }));
+        field.expressions = expressions;
+        field.hooks = hooks;
+        Object.defineProperty(field, '_jsonSchemaFormlyField', {
+            value: true,
+            configurable: true,
+        });
+        field.options?.build(field);
+    }
+    getSchemaField(schema) {
+        return schema._field?.fieldGroup?.[0];
+    }
+    isRecursiveMultiSchema(schemas, options) {
+        const visited = new WeakSet();
+        const visit = (schema) => {
+            if (!schema || typeof schema !== 'object') {
+                return false;
+            }
+            if (visited.has(schema)) {
+                return false;
+            }
+            visited.add(schema);
+            if (schema.$ref) {
+                const definition = this.getDefinition(schema.$ref, options);
+                return !!definition && (definition.oneOf === schemas || definition.anyOf === schemas || visit(definition));
+            }
+            if (schema.oneOf === schemas || schema.anyOf === schemas) {
+                return true;
+            }
+            const children = [];
+            if (schema.properties) {
+                children.push(...Object.values(schema.properties));
+            }
+            if (schema.items) {
+                children.push(...(Array.isArray(schema.items) ? schema.items : [schema.items]));
+            }
+            if (schema.additionalItems && typeof schema.additionalItems === 'object') {
+                children.push(schema.additionalItems);
+            }
+            if (schema.allOf) {
+                children.push(...schema.allOf);
+            }
+            if (schema.oneOf && schema.oneOf !== schemas) {
+                children.push(...schema.oneOf);
+            }
+            if (schema.anyOf && schema.anyOf !== schemas) {
+                children.push(...schema.anyOf);
+            }
+            if (schema.dependencies) {
+                Object.values(schema.dependencies).forEach((dependency) => {
+                    if (dependency && !Array.isArray(dependency)) {
+                        children.push(dependency);
+                    }
+                });
+            }
+            ['not', 'if', 'then', 'else'].forEach((key) => {
+                const child = schema[key];
+                if (child && typeof child === 'object') {
+                    children.push(child);
+                }
+            });
+            return children.some(visit);
+        };
+        return schemas.some(visit);
+    }
+    getDefinition(ref, options) {
+        const [uri, pointer] = ref.split('#/');
+        if (uri || !pointer) {
+            return null;
+        }
+        let definition = options.schema;
+        for (const path of pointer.split('/')) {
+            if (!definition || typeof definition !== 'object' || !definition.hasOwnProperty(path)) {
+                return null;
+            }
+            definition = definition[path];
+        }
+        return typeof definition === 'object' ? definition : null;
+    }
     resolveDefinition(schema, options) {
         const [uri, pointer] = schema.$ref.split('#/');
         if (uri) {
@@ -529,6 +696,58 @@ class FormlyJsonschema {
         });
         return { propDeps, schemaDeps };
     }
+    extractIfCondition(ifSchema) {
+        // Extract the property and const value from the "if" schema
+        // Supports: { "properties": { "propName": { "const": value } } }
+        if (ifSchema.properties) {
+            const propName = Object.keys(ifSchema.properties)[0];
+            if (propName) {
+                const propSchema = ifSchema.properties[propName];
+                if (propSchema && propSchema.hasOwnProperty('const')) {
+                    return { property: propName, value: propSchema.const };
+                }
+            }
+        }
+        return null;
+    }
+    resolveIfThenElse(schema, options) {
+        // Process if/then/else and return array of conditional schemas to add to fieldGroup
+        const conditionalSchemas = [];
+        if (schema.if && typeof schema.if === 'object') {
+            const condition = this.extractIfCondition(schema.if);
+            if (condition) {
+                // Process "then" branch
+                if (schema.then && typeof schema.then === 'object') {
+                    const resolvedSchema = this.resolveConditionalSchema(schema.then, options);
+                    conditionalSchemas.push({
+                        ...resolvedSchema,
+                        _ifCondition: condition,
+                    });
+                }
+                // Process "else" branch
+                if (schema.else && typeof schema.else === 'object') {
+                    const resolvedSchema = this.resolveConditionalSchema(schema.else, options);
+                    conditionalSchemas.push({
+                        ...resolvedSchema,
+                        _ifCondition: { property: condition.property, value: condition.value, negate: true },
+                    });
+                }
+            }
+        }
+        return conditionalSchemas;
+    }
+    resolveConditionalSchema(conditionalSchema, options) {
+        // Resolve $ref and allOf if present in conditional schema
+        // Note: We don't use resolveSchema here to avoid recursive processing of nested if/then/else
+        let resolved = conditionalSchema;
+        if (conditionalSchema.$ref) {
+            resolved = this.resolveDefinition(conditionalSchema, options);
+        }
+        if (resolved.allOf) {
+            resolved = this.resolveAllOf(resolved, options);
+        }
+        return resolved;
+    }
     guessSchemaType(schema) {
         const type = schema?.type;
         if (!type && schema?.properties) {
@@ -575,7 +794,7 @@ class FormlyJsonschema {
         }
         return this.toEnumOptions(schema.items);
     }
-    isFieldValid(root, i, schemas, options) {
+    isFieldValid(root, i, schemas, options, skipMultiSchemaValidation = false) {
         const schema = schemas[i];
         if (!schema._field) {
             Object.defineProperty(schema, '_field', { enumerable: false, writable: true, configurable: true });
@@ -594,6 +813,7 @@ class FormlyJsonschema {
                         ...options,
                         resetOnHide: true,
                         ignoreDefault: true,
+                        skipMultiSchemaValidation,
                         map: null,
                     }),
                 ],
@@ -619,10 +839,10 @@ class FormlyJsonschema {
         }
         return f1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyJsonschema, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyJsonschema, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormlyJsonschema, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormlyJsonschema, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyJsonschema, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormlyJsonschema, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });