Polish dynamic form property validation

src/demo/app/app.component.css

@@ -210,3 +210,16 @@ textarea:input:focus {
 .df-property-control {
   width: 100%;
 }
+
+.invalid-property-value .df-property-label-cell {
+  color: red;
+}
+
+.invalid-property-value .df-property-control {
+  outline-color: red;
+  border-color: red;
+}
+
+.validation-error-block {
+  color: red;
+}

src/demo/app/editor.ts

@@ -15,6 +15,7 @@
  */
 
 import { Flo, Constants, Properties } from 'spring-flo';
+import { Validators } from '@angular/forms';
 import { dia } from 'jointjs';
 import { BsModalService } from 'ngx-bootstrap';
 import { PropertiesDialogComponent } from './properties.dialog.component';
@@ -557,6 +558,7 @@ export class Editor implements Flo.Editor {
 class SamplePropertiesGroupModel extends Properties.PropertiesGroupModel {
   protected createControlModel(property : Properties.Property) : Properties.ControlModel<any> {
     let inputType = Properties.InputType.TEXT;
+    let validation : Properties.Validation;
     switch (property.metadata.type) {
       case 'number':
         inputType = Properties.InputType.NUMBER;
@@ -583,8 +585,16 @@ class SamplePropertiesGroupModel extends Properties.PropertiesGroupModel {
           }));
         }
       default:
+        if (property.metadata.name === 'name') {
+          validation = {
+            validator: Validators.required,
+            errorData: [
+              { id: 'required', message: 'Name is required!' }
+            ]
+          }
+        }
         break;
     }
-    return new Properties.GenericControlModel(property, inputType);
+    return new Properties.GenericControlModel(property, inputType, validation);
   }
 }

src/lib/src/properties/df.property.component.html

@@ -1,4 +1,4 @@
-<tr [formGroup]="form" class="df-property-row">
+<tr [formGroup]="form" class="df-property-row" [ngClass]="{'invalid-property-value': control.invalid}">
 
   <td class="df-property-label-cell">
     <label [attr.for]="model.id" class="df-form-label">{{model.name}}</label>
@@ -32,10 +32,10 @@
       <input *ngSwitchDefault class="df-property-control" type="text" [id]="model.id" [formControlName]="model.id"
              [placeholder]="model.defaultValue || ''" [(ngModel)]="model.value">
     </div>
-
-    <span class="glyphicon glyphicon-warning-sign form-control-feedback" *ngIf="!control.valid"></span>
-    <p class="help-block">{{model.description}}</p>
-    <p *ngFor="let e of errorData" class="validation-error-block">{{e.message}}</p>
+    <div class="help-block">
+      <div>{{model.description}}</div>
+      <div *ngFor="let e of errorData" class="validation-error-block">{{e.message}}</div>
+    </div>
   </td>
 
 </tr>

src/lib/src/properties/df.property.component.ts

@@ -25,7 +25,8 @@ export class DynamicFormPropertyComponent {
   }
 
   get errorData() {
-    return (this.model.validation && this.model.validation.errorData ? this.model.validation.errorData : []).map(e => this.control.errors[e.message]);
+    return (this.model.validation && this.model.validation.errorData ? this.model.validation.errorData : [])
+      .filter(e => this.control.errors && this.control.errors[e.id]);
   }
 
 }