@tft/crispr-forms 13.0.10 → 13.0.13

package/fesm2020/tft-crispr-forms.mjs

@@ -242,10 +242,14 @@ function buildFormGroupFromConfig(config, value = null, group = new FormGroup({}
         if (isControlConfig(controlConfig)) {
             // then add a control to the group using the controlName from configuration
             const { controlName } = controlConfig;
+            if (group.get(controlName)) {
+                group.removeControl(controlName);
+            }
             // if there's a value object and it has a non-null/undefined value for this field use it.
             // Otherwise, default to null
             const controlValue = (value && value[controlName]) ?? null;
-            group.addControl(controlName, createControlForType(controlConfig, controlValue));
+            const control = createControlForType(controlConfig, controlValue);
+            group.addControl(controlName, control);
         }
     });
     group.setValidators(config.validators);
@@ -1561,7 +1565,10 @@ const FIELD_COMPONENTS = {
     unitConversion: Promise.resolve().then(function () { return index$2; }).then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent)
 };
 function isControlComponent(component) {
-    return isControlConfig(component.config) || component.config.controlType === ControlType.BUTTON;
+    return isControlConfig(component.config) && 'value' in component; // || component.config.controlType === ControlType.BUTTON;
+}
+function isControlOrButtonComponent(component) {
+    return isControlComponent(component) || component.config.controlType === ControlType.BUTTON;
 }
 
 class CrisprFieldDirective {
@@ -1570,6 +1577,16 @@ class CrisprFieldDirective {
         this.renderer = renderer;
         this.cdr = cdr;
     }
+    set value(value) {
+        this._value = value;
+        if (this.component && isControlComponent(this.component)) {
+            this.component.value = value;
+        }
+    }
+    ;
+    get value() {
+        return this._value;
+    }
     async ngOnInit() {
         /**
          * create component and set values from config on its instance
@@ -1578,11 +1595,11 @@ class CrisprFieldDirective {
         const componentRef = this.container.createComponent(component);
         this.component = componentRef.instance;
         this.component.config = this.config;
-        if (isControlComponent(this.component)) {
+        if (isControlOrButtonComponent(this.component)) {
             this.component.group = this.group;
-            if ('value' in this.component) {
-                this.component.value = this.value;
-            }
+        }
+        if (isControlComponent(this.component)) {
+            this.component.value = this.value;
         }
         this.cdr.detectChanges();
         // adds any config classes to the dynamically generated component
@@ -1663,11 +1680,9 @@ class CrisprFormComponent {
         this.statusChanges = this.form.statusChanges;
         this.subs = [];
     }
-    ngOnChanges(changes) {
+    ngOnInit() {
         // build out the form, note that we pass in the form as the third argument and the function modifies it
-        if (changes.config || changes.value || changes.form) {
-            buildFormGroupFromConfig(this.config, this.value, this.form);
-        }
+        buildFormGroupFromConfig(this.config, this.value, this.form);
     }
     handleSubmit() {
         this.form.markAllAsTouched();
@@ -1678,7 +1693,7 @@ class CrisprFormComponent {
     }
 }
 CrisprFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CrisprFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: CrisprFormComponent, selector: "crispr-form", inputs: { config: "config", form: "form", value: "value" }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], directives: [{ type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": InitialControlValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+CrisprFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: CrisprFormComponent, selector: "crispr-form", inputs: { config: "config", form: "form", value: "value" }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], directives: [{ type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": InitialControlValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'crispr-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]