@ngxs/form-plugin 3.7.3 → 3.7.4-dev.master-43177a9

package/fesm5/ngxs-form-plugin.js

@@ -5,675 +5,685 @@ import { FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { filter, takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var UpdateFormStatus = /** @class */ (function () {
-    function UpdateFormStatus(payload) {
-        this.payload = payload;
-    }
-    Object.defineProperty(UpdateFormStatus, "type", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
-            return '[Forms] Update Form Status';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return UpdateFormStatus;
-}());
-if (false) {
-    /** @type {?} */
-    UpdateFormStatus.prototype.payload;
-}
-var UpdateFormValue = /** @class */ (function () {
-    function UpdateFormValue(payload) {
-        this.payload = payload;
-    }
-    Object.defineProperty(UpdateFormValue, "type", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
-            return '[Forms] Update Form Value';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return UpdateFormValue;
-}());
-if (false) {
-    /** @type {?} */
-    UpdateFormValue.prototype.payload;
-}
-var UpdateForm = /** @class */ (function () {
-    function UpdateForm(payload) {
-        this.payload = payload;
-    }
-    Object.defineProperty(UpdateForm, "type", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
-            return '[Forms] Update Form';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return UpdateForm;
-}());
-if (false) {
-    /** @type {?} */
-    UpdateForm.prototype.payload;
-}
-var UpdateFormDirty = /** @class */ (function () {
-    function UpdateFormDirty(payload) {
-        this.payload = payload;
-    }
-    Object.defineProperty(UpdateFormDirty, "type", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
-            return '[Forms] Update Form Dirty';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return UpdateFormDirty;
-}());
-if (false) {
-    /** @type {?} */
-    UpdateFormDirty.prototype.payload;
-}
-var SetFormDirty = /** @class */ (function () {
-    function SetFormDirty(payload) {
-        this.payload = payload;
-    }
-    Object.defineProperty(SetFormDirty, "type", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
-            return '[Forms] Set Form Dirty';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return SetFormDirty;
-}());
-if (false) {
-    /** @type {?} */
-    SetFormDirty.prototype.payload;
-}
-var SetFormPristine = /** @class */ (function () {
-    function SetFormPristine(payload) {
-        this.payload = payload;
-    }
-    Object.defineProperty(SetFormPristine, "type", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
-            return '[Forms] Set Form Pristine';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return SetFormPristine;
-}());
-if (false) {
-    /** @type {?} */
-    SetFormPristine.prototype.payload;
-}
-var UpdateFormErrors = /** @class */ (function () {
-    function UpdateFormErrors(payload) {
-        this.payload = payload;
-    }
-    Object.defineProperty(UpdateFormErrors, "type", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
-            return '[Forms] Update Form Errors';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return UpdateFormErrors;
-}());
-if (false) {
-    /** @type {?} */
-    UpdateFormErrors.prototype.payload;
-}
-var SetFormDisabled = /** @class */ (function () {
-    function SetFormDisabled(payload) {
-        this.payload = payload;
-    }
-    Object.defineProperty(SetFormDisabled, "type", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
-            return '[Forms] Set Form Disabled';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return SetFormDisabled;
-}());
-if (false) {
-    /** @type {?} */
-    SetFormDisabled.prototype.payload;
-}
-var SetFormEnabled = /** @class */ (function () {
-    function SetFormEnabled(payload) {
-        this.payload = payload;
-    }
-    Object.defineProperty(SetFormEnabled, "type", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
-            return '[Forms] Set Form Enabled';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return SetFormEnabled;
-}());
-if (false) {
-    /** @type {?} */
-    SetFormEnabled.prototype.payload;
-}
-var ResetForm = /** @class */ (function () {
-    function ResetForm(payload) {
-        this.payload = payload;
-    }
-    Object.defineProperty(ResetForm, "type", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
-            return '[Forms] Reset Form';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return ResetForm;
-}());
-if (false) {
-    /** @type {?} */
-    ResetForm.prototype.payload;
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var UpdateFormStatus = /** @class */ (function () {
+    function UpdateFormStatus(payload) {
+        this.payload = payload;
+    }
+    Object.defineProperty(UpdateFormStatus, "type", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
+            return '[Forms] Update Form Status';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return UpdateFormStatus;
+}());
+if (false) {
+    /** @type {?} */
+    UpdateFormStatus.prototype.payload;
+}
+var UpdateFormValue = /** @class */ (function () {
+    function UpdateFormValue(payload) {
+        this.payload = payload;
+    }
+    Object.defineProperty(UpdateFormValue, "type", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
+            return '[Forms] Update Form Value';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return UpdateFormValue;
+}());
+if (false) {
+    /** @type {?} */
+    UpdateFormValue.prototype.payload;
+}
+var UpdateForm = /** @class */ (function () {
+    function UpdateForm(payload) {
+        this.payload = payload;
+    }
+    Object.defineProperty(UpdateForm, "type", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
+            return '[Forms] Update Form';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return UpdateForm;
+}());
+if (false) {
+    /** @type {?} */
+    UpdateForm.prototype.payload;
+}
+var UpdateFormDirty = /** @class */ (function () {
+    function UpdateFormDirty(payload) {
+        this.payload = payload;
+    }
+    Object.defineProperty(UpdateFormDirty, "type", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
+            return '[Forms] Update Form Dirty';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return UpdateFormDirty;
+}());
+if (false) {
+    /** @type {?} */
+    UpdateFormDirty.prototype.payload;
+}
+var SetFormDirty = /** @class */ (function () {
+    function SetFormDirty(payload) {
+        this.payload = payload;
+    }
+    Object.defineProperty(SetFormDirty, "type", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
+            return '[Forms] Set Form Dirty';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return SetFormDirty;
+}());
+if (false) {
+    /** @type {?} */
+    SetFormDirty.prototype.payload;
+}
+var SetFormPristine = /** @class */ (function () {
+    function SetFormPristine(payload) {
+        this.payload = payload;
+    }
+    Object.defineProperty(SetFormPristine, "type", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
+            return '[Forms] Set Form Pristine';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return SetFormPristine;
+}());
+if (false) {
+    /** @type {?} */
+    SetFormPristine.prototype.payload;
+}
+var UpdateFormErrors = /** @class */ (function () {
+    function UpdateFormErrors(payload) {
+        this.payload = payload;
+    }
+    Object.defineProperty(UpdateFormErrors, "type", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
+            return '[Forms] Update Form Errors';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return UpdateFormErrors;
+}());
+if (false) {
+    /** @type {?} */
+    UpdateFormErrors.prototype.payload;
+}
+var SetFormDisabled = /** @class */ (function () {
+    function SetFormDisabled(payload) {
+        this.payload = payload;
+    }
+    Object.defineProperty(SetFormDisabled, "type", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
+            return '[Forms] Set Form Disabled';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return SetFormDisabled;
+}());
+if (false) {
+    /** @type {?} */
+    SetFormDisabled.prototype.payload;
+}
+var SetFormEnabled = /** @class */ (function () {
+    function SetFormEnabled(payload) {
+        this.payload = payload;
+    }
+    Object.defineProperty(SetFormEnabled, "type", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
+            return '[Forms] Set Form Enabled';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return SetFormEnabled;
+}());
+if (false) {
+    /** @type {?} */
+    SetFormEnabled.prototype.payload;
+}
+var ResetForm = /** @class */ (function () {
+    function ResetForm(payload) {
+        this.payload = payload;
+    }
+    Object.defineProperty(ResetForm, "type", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            // NOTE: Not necessary to declare the type in this way in your code. See https://github.com/ngxs/store/pull/644#issuecomment-436003138
+            return '[Forms] Reset Form';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return ResetForm;
+}());
+if (false) {
+    /** @type {?} */
+    ResetForm.prototype.payload;
 }
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var NgxsFormPlugin = /** @class */ (function () {
-    function NgxsFormPlugin() {
-    }
-    /**
-     * @param {?} state
-     * @param {?} event
-     * @param {?} next
-     * @return {?}
-     */
-    NgxsFormPlugin.prototype.handle = /**
-     * @param {?} state
-     * @param {?} event
-     * @param {?} next
-     * @return {?}
-     */
-    function (state, event, next) {
-        /** @type {?} */
-        var type = getActionTypeFromInstance(event);
-        /** @type {?} */
-        var nextState = state;
-        if (type === UpdateFormValue.type || type === UpdateForm.type || type === ResetForm.type) {
-            var value = event.payload.value;
-            /** @type {?} */
-            var payloadValue = Array.isArray(value) ? value.slice() : __assign({}, value);
-            /** @type {?} */
-            var path = this.joinPathWithPropertyPath(event);
-            nextState = setValue(nextState, path, payloadValue);
-        }
-        if (type === ResetForm.type) {
-            /** @type {?} */
-            var model = getValue(nextState, event.payload.path + ".model");
-            nextState = setValue(nextState, "" + event.payload.path, { model: model });
-        }
-        if (type === UpdateFormStatus.type || type === UpdateForm.type) {
-            nextState = setValue(nextState, event.payload.path + ".status", event.payload.status);
-        }
-        if (type === UpdateFormErrors.type || type === UpdateForm.type) {
-            nextState = setValue(nextState, event.payload.path + ".errors", __assign({}, event.payload.errors));
-        }
-        if (type === UpdateFormDirty.type || type === UpdateForm.type) {
-            nextState = setValue(nextState, event.payload.path + ".dirty", event.payload.dirty);
-        }
-        if (type === SetFormDirty.type) {
-            nextState = setValue(nextState, event.payload + ".dirty", true);
-        }
-        if (type === SetFormPristine.type) {
-            nextState = setValue(nextState, event.payload + ".dirty", false);
-        }
-        if (type === SetFormDisabled.type) {
-            nextState = setValue(nextState, event.payload + ".disabled", true);
-        }
-        if (type === SetFormEnabled.type) {
-            nextState = setValue(nextState, event.payload + ".disabled", false);
-        }
-        return next(nextState, event);
-    };
-    /**
-     * @private
-     * @param {?} __0
-     * @return {?}
-     */
-    NgxsFormPlugin.prototype.joinPathWithPropertyPath = /**
-     * @private
-     * @param {?} __0
-     * @return {?}
-     */
-    function (_a) {
-        var payload = _a.payload;
-        /** @type {?} */
-        var path = payload.path + ".model";
-        if (payload.propertyPath) {
-            path += "." + payload.propertyPath;
-        }
-        return path;
-    };
-    NgxsFormPlugin.decorators = [
-        { type: Injectable }
-    ];
-    return NgxsFormPlugin;
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NgxsFormPlugin = /** @class */ (function () {
+    function NgxsFormPlugin() {
+    }
+    /**
+     * @param {?} state
+     * @param {?} event
+     * @param {?} next
+     * @return {?}
+     */
+    NgxsFormPlugin.prototype.handle = /**
+     * @param {?} state
+     * @param {?} event
+     * @param {?} next
+     * @return {?}
+     */
+    function (state, event, next) {
+        /** @type {?} */
+        var type = getActionTypeFromInstance(event);
+        /** @type {?} */
+        var nextState = state;
+        if (type === UpdateFormValue.type || type === UpdateForm.type || type === ResetForm.type) {
+            var value = event.payload.value;
+            /** @type {?} */
+            var payloadValue = Array.isArray(value)
+                ? value.slice()
+                : isObjectLike(value)
+                    ? __assign({}, value) : value;
+            /** @type {?} */
+            var path = this.joinPathWithPropertyPath(event);
+            nextState = setValue(nextState, path, payloadValue);
+        }
+        if (type === ResetForm.type) {
+            /** @type {?} */
+            var model = getValue(nextState, event.payload.path + ".model");
+            nextState = setValue(nextState, "" + event.payload.path, { model: model });
+        }
+        if (type === UpdateFormStatus.type || type === UpdateForm.type) {
+            nextState = setValue(nextState, event.payload.path + ".status", event.payload.status);
+        }
+        if (type === UpdateFormErrors.type || type === UpdateForm.type) {
+            nextState = setValue(nextState, event.payload.path + ".errors", __assign({}, event.payload.errors));
+        }
+        if (type === UpdateFormDirty.type || type === UpdateForm.type) {
+            nextState = setValue(nextState, event.payload.path + ".dirty", event.payload.dirty);
+        }
+        if (type === SetFormDirty.type) {
+            nextState = setValue(nextState, event.payload + ".dirty", true);
+        }
+        if (type === SetFormPristine.type) {
+            nextState = setValue(nextState, event.payload + ".dirty", false);
+        }
+        if (type === SetFormDisabled.type) {
+            nextState = setValue(nextState, event.payload + ".disabled", true);
+        }
+        if (type === SetFormEnabled.type) {
+            nextState = setValue(nextState, event.payload + ".disabled", false);
+        }
+        return next(nextState, event);
+    };
+    /**
+     * @private
+     * @param {?} __0
+     * @return {?}
+     */
+    NgxsFormPlugin.prototype.joinPathWithPropertyPath = /**
+     * @private
+     * @param {?} __0
+     * @return {?}
+     */
+    function (_a) {
+        var payload = _a.payload;
+        /** @type {?} */
+        var path = payload.path + ".model";
+        if (payload.propertyPath) {
+            path += "." + payload.propertyPath;
+        }
+        return path;
+    };
+    NgxsFormPlugin.decorators = [
+        { type: Injectable }
+    ];
+    return NgxsFormPlugin;
 }());
+/**
+ * @param {?} target
+ * @return {?}
+ */
+function isObjectLike(target) {
+    return target !== null && typeof target === 'object';
+}
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var FormDirective = /** @class */ (function () {
-    function FormDirective(_actions$, _store, _formGroupDirective, _cd) {
-        this._actions$ = _actions$;
-        this._store = _store;
-        this._formGroupDirective = _formGroupDirective;
-        this._cd = _cd;
-        this.path = (/** @type {?} */ (null));
-        this.debounce = 100;
-        this._clearDestroy = false;
-        this._destroy$ = new Subject();
-        this._updating = false;
-    }
-    Object.defineProperty(FormDirective.prototype, "clearDestroy", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this._clearDestroy;
-        },
-        set: /**
-         * @param {?} val
-         * @return {?}
-         */
-        function (val) {
-            this._clearDestroy = val != null && "" + val !== 'false';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @return {?}
-     */
-    FormDirective.prototype.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-        var _this = this;
-        this._actions$
-            .pipe(ofActionDispatched(ResetForm), filter((/**
-         * @param {?} action
-         * @return {?}
-         */
-        function (action) { return action.payload.path === _this.path; })), takeUntil(this._destroy$))
-            .subscribe((/**
-         * @param {?} __0
-         * @return {?}
-         */
-        function (_a) {
-            var value = _a.payload.value;
-            _this.form.reset(value);
-            _this.updateFormStateWithRawValue(true);
-            _this._cd.markForCheck();
-        }));
-        this.getStateStream(this.path + ".model").subscribe((/**
-         * @param {?} model
-         * @return {?}
-         */
-        function (model) {
-            if (_this._updating || !model) {
-                return;
-            }
-            _this.form.patchValue(model);
-            _this._cd.markForCheck();
-        }));
-        this.getStateStream(this.path + ".dirty").subscribe((/**
-         * @param {?} dirty
-         * @return {?}
-         */
-        function (dirty) {
-            if (_this.form.dirty === dirty || typeof dirty !== 'boolean') {
-                return;
-            }
-            if (dirty) {
-                _this.form.markAsDirty();
-            }
-            else {
-                _this.form.markAsPristine();
-            }
-            _this._cd.markForCheck();
-        }));
-        // On first state change, sync form model, status and dirty with state
-        this._store
-            .selectOnce((/**
-         * @param {?} state
-         * @return {?}
-         */
-        function (state) { return getValue(state, _this.path); }))
-            .subscribe((/**
-         * @return {?}
-         */
-        function () {
-            _this._store.dispatch([
-                new UpdateFormValue({
-                    path: _this.path,
-                    value: _this.form.getRawValue()
-                }),
-                new UpdateFormStatus({
-                    path: _this.path,
-                    status: _this.form.status
-                }),
-                new UpdateFormDirty({
-                    path: _this.path,
-                    dirty: _this.form.dirty
-                })
-            ]);
-        }));
-        this.getStateStream(this.path + ".disabled").subscribe((/**
-         * @param {?} disabled
-         * @return {?}
-         */
-        function (disabled) {
-            if (_this.form.disabled === disabled || typeof disabled !== 'boolean') {
-                return;
-            }
-            if (disabled) {
-                _this.form.disable();
-            }
-            else {
-                _this.form.enable();
-            }
-            _this._cd.markForCheck();
-        }));
-        (/** @type {?} */ (this._formGroupDirective.valueChanges)).pipe(this.debounceChange()).subscribe((/**
-         * @return {?}
-         */
-        function () {
-            _this.updateFormStateWithRawValue();
-        }));
-        (/** @type {?} */ (this._formGroupDirective
-            .statusChanges)).pipe(distinctUntilChanged(), this.debounceChange())
-            .subscribe((/**
-         * @param {?} status
-         * @return {?}
-         */
-        function (status) {
-            _this._store.dispatch(new UpdateFormStatus({
-                status: status,
-                path: _this.path
-            }));
-        }));
-    };
-    /**
-     * @param {?=} withFormStatus
-     * @return {?}
-     */
-    FormDirective.prototype.updateFormStateWithRawValue = /**
-     * @param {?=} withFormStatus
-     * @return {?}
-     */
-    function (withFormStatus) {
-        var _this = this;
-        if (this._updating)
-            return;
-        /** @type {?} */
-        var value = this._formGroupDirective.control.getRawValue();
-        /** @type {?} */
-        var actions = [
-            new UpdateFormValue({
-                path: this.path,
-                value: value
-            }),
-            new UpdateFormDirty({
-                path: this.path,
-                dirty: this._formGroupDirective.dirty
-            }),
-            new UpdateFormErrors({
-                path: this.path,
-                errors: this._formGroupDirective.errors
-            })
-        ];
-        if (withFormStatus) {
-            actions.push(new UpdateFormStatus({
-                path: this.path,
-                status: this._formGroupDirective.status
-            }));
-        }
-        this._updating = true;
-        this._store.dispatch(actions).subscribe({
-            error: (/**
-             * @return {?}
-             */
-            function () { return (_this._updating = false); }),
-            complete: (/**
-             * @return {?}
-             */
-            function () { return (_this._updating = false); })
-        });
-    };
-    /**
-     * @return {?}
-     */
-    FormDirective.prototype.ngOnDestroy = /**
-     * @return {?}
-     */
-    function () {
-        this._destroy$.next();
-        this._destroy$.complete();
-        if (this.clearDestroy) {
-            this._store.dispatch(new UpdateForm({
-                path: this.path,
-                value: null,
-                dirty: null,
-                status: null,
-                errors: null
-            }));
-        }
-    };
-    /**
-     * @private
-     * @return {?}
-     */
-    FormDirective.prototype.debounceChange = /**
-     * @private
-     * @return {?}
-     */
-    function () {
-        var _this = this;
-        /** @type {?} */
-        var skipDebounceTime = this._formGroupDirective.control.updateOn !== 'change' || this.debounce < 0;
-        return skipDebounceTime
-            ? (/**
-             * @param {?} change
-             * @return {?}
-             */
-            function (change) { return change.pipe(takeUntil(_this._destroy$)); })
-            : (/**
-             * @param {?} change
-             * @return {?}
-             */
-            function (change) {
-                return change.pipe(debounceTime(_this.debounce), takeUntil(_this._destroy$));
-            });
-    };
-    Object.defineProperty(FormDirective.prototype, "form", {
-        get: /**
-         * @private
-         * @return {?}
-         */
-        function () {
-            return this._formGroupDirective.form;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @private
-     * @param {?} path
-     * @return {?}
-     */
-    FormDirective.prototype.getStateStream = /**
-     * @private
-     * @param {?} path
-     * @return {?}
-     */
-    function (path) {
-        return this._store.select((/**
-         * @param {?} state
-         * @return {?}
-         */
-        function (state) { return getValue(state, path); })).pipe(takeUntil(this._destroy$));
-    };
-    FormDirective.decorators = [
-        { type: Directive, args: [{ selector: '[ngxsForm]' },] }
-    ];
-    /** @nocollapse */
-    FormDirective.ctorParameters = function () { return [
-        { type: Actions },
-        { type: Store },
-        { type: FormGroupDirective },
-        { type: ChangeDetectorRef }
-    ]; };
-    FormDirective.propDecorators = {
-        path: [{ type: Input, args: ['ngxsForm',] }],
-        debounce: [{ type: Input, args: ['ngxsFormDebounce',] }],
-        clearDestroy: [{ type: Input, args: ['ngxsFormClearOnDestroy',] }]
-    };
-    return FormDirective;
-}());
-if (false) {
-    /** @type {?} */
-    FormDirective.prototype.path;
-    /** @type {?} */
-    FormDirective.prototype.debounce;
-    /** @type {?} */
-    FormDirective.prototype._clearDestroy;
-    /**
-     * @type {?}
-     * @private
-     */
-    FormDirective.prototype._destroy$;
-    /**
-     * @type {?}
-     * @private
-     */
-    FormDirective.prototype._updating;
-    /**
-     * @type {?}
-     * @private
-     */
-    FormDirective.prototype._actions$;
-    /**
-     * @type {?}
-     * @private
-     */
-    FormDirective.prototype._store;
-    /**
-     * @type {?}
-     * @private
-     */
-    FormDirective.prototype._formGroupDirective;
-    /**
-     * @type {?}
-     * @private
-     */
-    FormDirective.prototype._cd;
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var FormDirective = /** @class */ (function () {
+    function FormDirective(_actions$, _store, _formGroupDirective, _cd) {
+        this._actions$ = _actions$;
+        this._store = _store;
+        this._formGroupDirective = _formGroupDirective;
+        this._cd = _cd;
+        this.path = (/** @type {?} */ (null));
+        this.debounce = 100;
+        this._clearDestroy = false;
+        this._destroy$ = new Subject();
+        this._updating = false;
+    }
+    Object.defineProperty(FormDirective.prototype, "clearDestroy", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._clearDestroy;
+        },
+        set: /**
+         * @param {?} val
+         * @return {?}
+         */
+        function (val) {
+            this._clearDestroy = val != null && "" + val !== 'false';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @return {?}
+     */
+    FormDirective.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this._actions$
+            .pipe(ofActionDispatched(ResetForm), filter((/**
+         * @param {?} action
+         * @return {?}
+         */
+        function (action) { return action.payload.path === _this.path; })), takeUntil(this._destroy$))
+            .subscribe((/**
+         * @param {?} __0
+         * @return {?}
+         */
+        function (_a) {
+            var value = _a.payload.value;
+            _this.form.reset(value);
+            _this.updateFormStateWithRawValue(true);
+            _this._cd.markForCheck();
+        }));
+        this.getStateStream(this.path + ".model").subscribe((/**
+         * @param {?} model
+         * @return {?}
+         */
+        function (model) {
+            if (_this._updating || !model) {
+                return;
+            }
+            _this.form.patchValue(model);
+            _this._cd.markForCheck();
+        }));
+        this.getStateStream(this.path + ".dirty").subscribe((/**
+         * @param {?} dirty
+         * @return {?}
+         */
+        function (dirty) {
+            if (_this.form.dirty === dirty || typeof dirty !== 'boolean') {
+                return;
+            }
+            if (dirty) {
+                _this.form.markAsDirty();
+            }
+            else {
+                _this.form.markAsPristine();
+            }
+            _this._cd.markForCheck();
+        }));
+        // On first state change, sync form model, status and dirty with state
+        this._store
+            .selectOnce((/**
+         * @param {?} state
+         * @return {?}
+         */
+        function (state) { return getValue(state, _this.path); }))
+            .subscribe((/**
+         * @return {?}
+         */
+        function () {
+            _this._store.dispatch([
+                new UpdateFormValue({
+                    path: _this.path,
+                    value: _this.form.getRawValue()
+                }),
+                new UpdateFormStatus({
+                    path: _this.path,
+                    status: _this.form.status
+                }),
+                new UpdateFormDirty({
+                    path: _this.path,
+                    dirty: _this.form.dirty
+                })
+            ]);
+        }));
+        this.getStateStream(this.path + ".disabled").subscribe((/**
+         * @param {?} disabled
+         * @return {?}
+         */
+        function (disabled) {
+            if (_this.form.disabled === disabled || typeof disabled !== 'boolean') {
+                return;
+            }
+            if (disabled) {
+                _this.form.disable();
+            }
+            else {
+                _this.form.enable();
+            }
+            _this._cd.markForCheck();
+        }));
+        (/** @type {?} */ (this._formGroupDirective.valueChanges)).pipe(this.debounceChange()).subscribe((/**
+         * @return {?}
+         */
+        function () {
+            _this.updateFormStateWithRawValue();
+        }));
+        (/** @type {?} */ (this._formGroupDirective
+            .statusChanges)).pipe(distinctUntilChanged(), this.debounceChange())
+            .subscribe((/**
+         * @param {?} status
+         * @return {?}
+         */
+        function (status) {
+            _this._store.dispatch(new UpdateFormStatus({
+                status: status,
+                path: _this.path
+            }));
+        }));
+    };
+    /**
+     * @param {?=} withFormStatus
+     * @return {?}
+     */
+    FormDirective.prototype.updateFormStateWithRawValue = /**
+     * @param {?=} withFormStatus
+     * @return {?}
+     */
+    function (withFormStatus) {
+        var _this = this;
+        if (this._updating)
+            return;
+        /** @type {?} */
+        var value = this._formGroupDirective.control.getRawValue();
+        /** @type {?} */
+        var actions = [
+            new UpdateFormValue({
+                path: this.path,
+                value: value
+            }),
+            new UpdateFormDirty({
+                path: this.path,
+                dirty: this._formGroupDirective.dirty
+            }),
+            new UpdateFormErrors({
+                path: this.path,
+                errors: this._formGroupDirective.errors
+            })
+        ];
+        if (withFormStatus) {
+            actions.push(new UpdateFormStatus({
+                path: this.path,
+                status: this._formGroupDirective.status
+            }));
+        }
+        this._updating = true;
+        this._store.dispatch(actions).subscribe({
+            error: (/**
+             * @return {?}
+             */
+            function () { return (_this._updating = false); }),
+            complete: (/**
+             * @return {?}
+             */
+            function () { return (_this._updating = false); })
+        });
+    };
+    /**
+     * @return {?}
+     */
+    FormDirective.prototype.ngOnDestroy = /**
+     * @return {?}
+     */
+    function () {
+        this._destroy$.next();
+        this._destroy$.complete();
+        if (this.clearDestroy) {
+            this._store.dispatch(new UpdateForm({
+                path: this.path,
+                value: null,
+                dirty: null,
+                status: null,
+                errors: null
+            }));
+        }
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    FormDirective.prototype.debounceChange = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        /** @type {?} */
+        var skipDebounceTime = this._formGroupDirective.control.updateOn !== 'change' || this.debounce < 0;
+        return skipDebounceTime
+            ? (/**
+             * @param {?} change
+             * @return {?}
+             */
+            function (change) { return change.pipe(takeUntil(_this._destroy$)); })
+            : (/**
+             * @param {?} change
+             * @return {?}
+             */
+            function (change) {
+                return change.pipe(debounceTime(_this.debounce), takeUntil(_this._destroy$));
+            });
+    };
+    Object.defineProperty(FormDirective.prototype, "form", {
+        get: /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            return this._formGroupDirective.form;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @private
+     * @param {?} path
+     * @return {?}
+     */
+    FormDirective.prototype.getStateStream = /**
+     * @private
+     * @param {?} path
+     * @return {?}
+     */
+    function (path) {
+        return this._store.select((/**
+         * @param {?} state
+         * @return {?}
+         */
+        function (state) { return getValue(state, path); })).pipe(takeUntil(this._destroy$));
+    };
+    FormDirective.decorators = [
+        { type: Directive, args: [{ selector: '[ngxsForm]' },] }
+    ];
+    /** @nocollapse */
+    FormDirective.ctorParameters = function () { return [
+        { type: Actions },
+        { type: Store },
+        { type: FormGroupDirective },
+        { type: ChangeDetectorRef }
+    ]; };
+    FormDirective.propDecorators = {
+        path: [{ type: Input, args: ['ngxsForm',] }],
+        debounce: [{ type: Input, args: ['ngxsFormDebounce',] }],
+        clearDestroy: [{ type: Input, args: ['ngxsFormClearOnDestroy',] }]
+    };
+    return FormDirective;
+}());
+if (false) {
+    /** @type {?} */
+    FormDirective.prototype.path;
+    /** @type {?} */
+    FormDirective.prototype.debounce;
+    /** @type {?} */
+    FormDirective.prototype._clearDestroy;
+    /**
+     * @type {?}
+     * @private
+     */
+    FormDirective.prototype._destroy$;
+    /**
+     * @type {?}
+     * @private
+     */
+    FormDirective.prototype._updating;
+    /**
+     * @type {?}
+     * @private
+     */
+    FormDirective.prototype._actions$;
+    /**
+     * @type {?}
+     * @private
+     */
+    FormDirective.prototype._store;
+    /**
+     * @type {?}
+     * @private
+     */
+    FormDirective.prototype._formGroupDirective;
+    /**
+     * @type {?}
+     * @private
+     */
+    FormDirective.prototype._cd;
 }
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-var NgxsFormPluginModule = /** @class */ (function () {
-    function NgxsFormPluginModule() {
-    }
-    /**
-     * @return {?}
-     */
-    NgxsFormPluginModule.forRoot = /**
-     * @return {?}
-     */
-    function () {
-        return {
-            ngModule: NgxsFormPluginModule,
-            providers: [
-                {
-                    provide: NGXS_PLUGINS,
-                    useClass: NgxsFormPlugin,
-                    multi: true
-                }
-            ]
-        };
-    };
-    NgxsFormPluginModule.decorators = [
-        { type: NgModule, args: [{
-                    imports: [ReactiveFormsModule],
-                    declarations: [FormDirective],
-                    exports: [FormDirective]
-                },] }
-    ];
-    return NgxsFormPluginModule;
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NgxsFormPluginModule = /** @class */ (function () {
+    function NgxsFormPluginModule() {
+    }
+    /**
+     * @return {?}
+     */
+    NgxsFormPluginModule.forRoot = /**
+     * @return {?}
+     */
+    function () {
+        return {
+            ngModule: NgxsFormPluginModule,
+            providers: [
+                {
+                    provide: NGXS_PLUGINS,
+                    useClass: NgxsFormPlugin,
+                    multi: true
+                }
+            ]
+        };
+    };
+    NgxsFormPluginModule.decorators = [
+        { type: NgModule, args: [{
+                    imports: [ReactiveFormsModule],
+                    declarations: [FormDirective],
+                    exports: [FormDirective]
+                },] }
+    ];
+    return NgxsFormPluginModule;
 }());
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
 export { NgxsFormPlugin, NgxsFormPluginModule, ResetForm, SetFormDirty, SetFormDisabled, SetFormEnabled, SetFormPristine, UpdateForm, UpdateFormDirty, UpdateFormErrors, UpdateFormStatus, UpdateFormValue, FormDirective as ɵa };