ngx-render-material-forms 1.3.4 → 1.3.6

package/fesm2020/ngx-render-material-forms.js

@@ -513,7 +513,12 @@ class MaterialTextfieldComponent extends MaterialComponent {
                         this.controlHasError = this.control.hasError(msg.context.validator);
                     }
                     if (msg.context && this.controlHasError) {
-                        return this.instance.error.message;
+                        if (this.instance && this.instance.parent && this.instance.parent.submission && this.instance.parent.submission.data) {
+                            if (this.instance.parent.submission.data.submit) {
+                                this.control.markAllAsTouched();
+                            }
+                        }
+                        return this.instance.error ? this.instance.error.message : '';
                     }
                 }
             }
@@ -1056,6 +1061,16 @@ class MaterialTextareaComponent extends MaterialComponent {
         // Attach the element so the wysiwyg will work.
         this.instance.attachElement(this.textarea.nativeElement);
     }
+    getErrorMessage() {
+        // Check if instance and necessary properties exist
+        if (this.instance && this.instance.parent && this.instance.parent.submission && this.instance.parent.submission.data) {
+            if (this.instance.parent.submission.data.submit) {
+                this.control.markAllAsTouched();
+            }
+        }
+        // Return the error message if it exists
+        return this.instance.error ? this.instance.error.message : '';
+    }
     getValue() {
         return isNil(this.control.value) ? '' : this.control.value;
     }
@@ -1082,7 +1097,7 @@ MaterialTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
         >
         </textarea>
         <span *ngIf="instance.component.suffix" matSuffix>{{ instance.component.suffix }}</span>
-        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+        <mat-error *ngIf="instance.error">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </ng-template>
   `, isInline: true, styles: [".mat-input-element{min-height:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i5.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] });
@@ -1109,7 +1124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
         >
         </textarea>
         <span *ngIf="instance.component.suffix" matSuffix>{{ instance.component.suffix }}</span>
-        <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+        <mat-error *ngIf="instance.error">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </ng-template>
   `, styles: [".mat-input-element{min-height:16px}\n"] }]