Merge pull request #168 from CloudInn/listing-enhancements

Add option to hide form fields from listing, remove validations from …

Author: thelinuxer

projects/crud/package.json

@@ -1,6 +1,6 @@
 {
     "name": "ng-crud-ui",
-    "version": "5.10.19",
+    "version": "5.10.20",
     "dependencies": {
         "tslib": "^2.0.0"
     },

projects/crud/src/lib/components/form-field/form-field.component.html

@@ -1,4 +1,4 @@
-<ng-container [ngSwitch]="config?.type" [formGroup]="formGroup">
+<ng-container [ngSwitch]="config?.type" [formGroup]="formGroup" *ngIf="config?.showInListing !== false || mode !== 'search'">
 
     <ng-container *ngSwitchCase="'boolean'">
         <div class="checkbox-container">
@@ -51,12 +51,14 @@
     <mat-form-field *ngSwitchDefault>
         <mat-label>{{ config?.label }}</mat-label>
         <input matInput [formControlName]="config?.name" attr.data-cy="{{config.label | getSelector}}-input" id="{{config?.name}}-field" [maxlength]="config?.maxlength" [required]="f[config?.name].hasError('required') && mode !== 'search'" [type]="config?.control ? config?.control.type : 'text'" [readonly]="config.disabled !== undefined ? config.disabled : false"/>
-        <mat-error *ngIf="mode !== 'search' && f[config.name].hasError('required') && (f[config.name].dirty || f[config.name].touched)" id="{{config.name}}-required-error">
-            this field is required</mat-error>
-        <mat-error *ngIf="f[config.name].hasError('maxlength') && (f[config.name].dirty || f[config.name].touched)" id="{{config.name}}-maxLength-error">
-            max length is {{config?.maxlength}} characters</mat-error>
-        <mat-error *ngIf="f[config.name].hasError('pattern') && (f[config.name].dirty || f[config.name].touched)" id="{{config.name}}-pattern-error">
-            {{getFieldErrorMessage("pattern")? getFieldErrorMessage("pattern"): "pattern for this field is invalid"}}
-        </mat-error>
+        <ng-container *ngIf="mode !== 'search'">
+            <mat-error *ngIf="f[config.name].hasError('required') && (f[config.name].dirty || f[config.name].touched)" id="{{config.name}}-required-error">
+                this field is required</mat-error>
+            <mat-error *ngIf="f[config.name].hasError('maxlength') && (f[config.name].dirty || f[config.name].touched)" id="{{config.name}}-maxLength-error">
+                max length is {{config?.maxlength}} characters</mat-error>
+            <mat-error *ngIf="f[config.name].hasError('pattern') && (f[config.name].dirty || f[config.name].touched)" id="{{config.name}}-pattern-error">
+                {{getFieldErrorMessage("pattern")? getFieldErrorMessage("pattern"): "pattern for this field is invalid"}}
+            </mat-error>
+        </ng-container>
     </mat-form-field>
 </ng-container>

projects/crud/src/lib/components/form-field/form-field.component.ts

@@ -37,6 +37,7 @@ export class FormFieldComponent implements OnChanges, OnInit {
         }
       });
     }
+    this.checkValidity();
   }
 
   deleteAttachment(event) {

projects/crud/src/lib/components/model-form/model-form.component.ts

@@ -342,6 +342,11 @@ export class ModelFormComponent implements OnInit, OnDestroy {
             } else {
                 this.initialLoading = false;
                 const contains_ctrl = this.viewConfig.controls.filter(ctrl => ctrl.iContains);
+                this.viewConfig.controls.forEach(ctrl => {
+                    if (ctrl.showInListing === false && this.formGroup.value.hasOwnProperty(ctrl.name)) {
+                        delete this.formGroup.value[ctrl.name];
+                    }
+                });
                 this.submit.emit({ ...this.formGroup.value, iContains: contains_ctrl });
             }
         } else {

projects/crud/src/lib/models/metadata.ts

@@ -82,6 +82,7 @@ export class FieldConfig {
     cellStyle?: {};
     dropDownDisplay?: string;
     DatePickerStartAt?: any;
+    showInListing?: boolean;
 }
 
 export interface CustomElementConfig {