@ngx-formly/core 6.0.0-rc.0 → 6.0.0

package/fesm2020/ngx-formly-core.mjs

@@ -281,9 +281,12 @@ function markFieldForCheck(field) {
     });
 }
 
+/**
+ * An InjectionToken for registering additional formly config options (types, wrappers ...).
+ */
 const FORMLY_CONFIG = new InjectionToken('FORMLY_CONFIG');
 /**
- * Maintains list of formly field directive types. This can be used to register new field templates.
+ * Maintains list of formly config options. This can be used to register new field type.
  */
 class FormlyConfig {
     constructor() {
@@ -331,6 +334,10 @@ class FormlyConfig {
             };
         }
     }
+    /**
+     * Allows you to specify a custom type which you can use in your field configuration.
+     * You can pass an object of options, or an array of objects of options.
+     */
     setType(options) {
         if (Array.isArray(options)) {
             options.forEach((option) => this.setType(option));
@@ -359,6 +366,7 @@ class FormlyConfig {
         this.mergeExtendedType(name);
         return this.types[name];
     }
+    /** @ignore */
     getMergedField(field = {}) {
         const type = this.getType(field.type);
         if (!type) {
@@ -387,7 +395,7 @@ class FormlyConfig {
             field.wrappers = [...type.wrappers];
         }
     }
-    /** @internal */
+    /** @ignore @internal */
     resolveFieldTypeRef(field = {}) {
         const type = this.getType(field.type);
         if (!type) {
@@ -422,6 +430,7 @@ class FormlyConfig {
         }
         return this.wrappers[name];
     }
+    /** @ignore */
     setTypeWrapper(type, name) {
         if (!this.types[type]) {
             this.types[type] = {};
@@ -697,6 +706,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type: Injectable
         }] });
 
+/**
+ * The `<formly-field>` component is used to render the UI widget (layout + type) of a given `field`.
+ */
 class FormlyField {
     constructor(config, renderer, _elementRef, hostContainerRef, form) {
         this.config = config;
@@ -875,7 +887,7 @@ class FormlyField {
         }
         const subscribes = [
             observeDeep(field, ['props'], () => field.options.detectChanges(field)),
-            observeDeep(field, ['options', 'formState'], () => field.options.detectChanges(field)),
+            observeDeep(field.options, ['formState'], () => field.options.detectChanges(field)),
         ];
         for (const path of [['template'], ['fieldGroupClassName'], ['validation', 'show']]) {
             const fieldObserver = observe(field, path, ({ firstChange }) => !firstChange && field.options.detectChanges(field));
@@ -933,35 +945,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['container', { read: ViewContainerRef, static: true }]
             }] } });
 
+/**
+ * The `<form-form>` component is the main container of the form,
+ * which takes care of managing the form state
+ * and delegates the rendering of each field to `<formly-field>` component.
+ */
 class FormlyForm {
     constructor(builder, config, ngZone, fieldTemplates) {
         this.builder = builder;
         this.config = config;
         this.ngZone = ngZone;
         this.fieldTemplates = fieldTemplates;
+        /** Event that is emitted when the model value is changed */
         this.modelChange = new EventEmitter();
         this.field = { type: 'formly-group' };
         this._modelChangeValue = {};
         this.valueChangesUnsubscribe = () => { };
     }
+    /** The form instance which allow to track model value and validation status. */
     set form(form) {
         this.field.form = form;
     }
     get form() {
         return this.field.form;
     }
+    /** The model to be represented by the form. */
     set model(model) {
         this.setField({ model });
     }
     get model() {
         return this.field.model;
     }
+    /** The field configurations for building the form. */
     set fields(fieldGroup) {
         this.setField({ fieldGroup });
     }
     get fields() {
         return this.field.fieldGroup;
     }
+    /** Options for the form. */
     set options(options) {
         this.setField({ options });
     }
@@ -1038,6 +1060,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [FormlyTemplate]
             }] } });
 
+/**
+ * Allow to link the `field` HTML attributes (`id`, `name` ...) and Event attributes (`focus`, `blur` ...) to an element in the DOM.
+ */
 class FormlyAttributes {
     constructor(renderer, elementRef, _document) {
         this.renderer = renderer;
@@ -1148,10 +1173,10 @@ class FormlyAttributes {
         const isFocused = !!this.document.activeElement &&
             this.fieldAttrElements.some(({ nativeElement }) => this.document.activeElement === nativeElement || nativeElement.contains(this.document.activeElement));
         if (value && !isFocused) {
-            element.nativeElement.focus();
+            Promise.resolve().then(() => element.nativeElement.focus());
         }
         else if (!value && isFocused) {
-            element.nativeElement.blur();
+            Promise.resolve().then(() => element.nativeElement.blur());
         }
     }
     onFocus($event) {
@@ -1258,6 +1283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
+/** @ignore */
 class FormlyGroup extends FieldType {
 }
 FormlyGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormlyGroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -1280,6 +1306,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+/**
+ * The `<formly-validation-message>` component renders the error message of a given `field`.
+ */
 class FormlyValidationMessage {
     constructor(config) {
         this.config = config;
@@ -1410,6 +1439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['fieldComponent', { read: ViewContainerRef, static: true }]
             }] } });
 
+/** @ignore */
 class FormlyTemplateType extends FieldType {
     constructor(sanitizer) {
         super();
@@ -1921,6 +1951,14 @@ class FieldFormExtension {
                 }
                 if (markForCheck) {
                     updateValidity(c, true);
+                    // update validity of `FormGroup` instance created by field with nested key.
+                    let parent = c.parent;
+                    for (let i = 1; i < getKeyPath(field).length; i++) {
+                        if (parent) {
+                            updateValidity(parent, true);
+                            parent = parent.parent;
+                        }
+                    }
                 }
             }
         }