fix(editors): not allow grid paste of invalid values, issue #171

src/app/examples/custom-inputEditor.ts

@@ -87,7 +87,8 @@ export class CustomInputEditor implements Editor {
   }
 
   applyValue(item: any, state: any) {
-    item[this.args.column.field] = state;
+    const validation = this.validate(state);
+    item[this.args.column.field] = (validation && validation.valid) ? state : '';
   }
 
   isValueChanged() {
@@ -109,9 +110,9 @@ export class CustomInputEditor implements Editor {
     }
   }
 
-  validate(): EditorValidatorOutput {
+  validate(inputValue?: any): EditorValidatorOutput {
     if (this.validator) {
-      const value = this.$input && this.$input.val && this.$input.val();
+      const value = (inputValue !== undefined) ? inputValue : this.$input && this.$input.val && this.$input.val();
       return this.validator(value, this.args);
     }
 

src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts

@@ -185,7 +185,8 @@ export class AutoCompleteEditor implements Editor {
 
     // when it's a complex object, then pull the object name only, e.g.: "user.firstName" => "user"
     const fieldNameFromComplexObject = fieldName.indexOf('.') ? fieldName.substring(0, fieldName.indexOf('.')) : '';
-    item[fieldNameFromComplexObject || fieldName] = newValue;
+    const validation = this.validate(newValue);
+    item[fieldNameFromComplexObject || fieldName] = (validation && validation.valid) ? newValue : '';
   }
 
   isValueChanged() {
@@ -196,9 +197,9 @@ export class AutoCompleteEditor implements Editor {
     return (!(this.$input.val() === '' && this._defaultTextValue === null)) && (this.$input.val() !== this._defaultTextValue);
   }
 
-  validate(): EditorValidatorOutput {
+  validate(inputValue?: any): EditorValidatorOutput {
     const isRequired = this.columnEditor.required;
-    const elmValue = this.$input && this.$input.val && this.$input.val();
+    const elmValue = (inputValue !== undefined) ? inputValue : this.$input && this.$input.val && this.$input.val();
     const errorMsg = this.columnEditor.errorMessage;
 
     if (this.validator) {

src/app/modules/angular-slickgrid/editors/checkboxEditor.ts

@@ -89,16 +89,17 @@ export class CheckboxEditor implements Editor {
     const fieldName = this.columnDef && this.columnDef.field;
     // when it's a complex object, then pull the object name only, e.g.: "user.firstName" => "user"
     const fieldNameFromComplexObject = fieldName.indexOf('.') ? fieldName.substring(0, fieldName.indexOf('.')) : '';
-    item[fieldNameFromComplexObject || fieldName] = state;
+    const validation = this.validate(state);
+    item[fieldNameFromComplexObject || fieldName] = (validation && validation.valid) ? state : '';
   }
 
   isValueChanged() {
     return (this.serializeValue() !== this.defaultValue);
   }
 
-  validate(): EditorValidatorOutput {
+  validate(inputValue?: any): EditorValidatorOutput {
     const isRequired = this.columnEditor.required;
-    const isChecked = this.$input && this.$input.prop && this.$input.prop('checked');
+    const isChecked = (inputValue !== undefined) ? inputValue : this.$input && this.$input.prop && this.$input.prop('checked');
     const errorMsg = this.columnEditor.errorMessage;
 
     if (this.validator) {

src/app/modules/angular-slickgrid/editors/dateEditor.ts

@@ -35,6 +35,11 @@ export class DateEditor implements Editor {
     return this.columnDef && this.columnDef.internalColumnEditor && this.columnDef.internalColumnEditor || {};
   }
 
+  /** Get Flatpickr options passed to the editor by the user */
+  get editorOptions(): any {
+    return this.columnEditor.editorOptions || {};
+  }
+
   /** Get the Validator function, can be passed in Editor property or Column Definition */
   get validator(): EditorValidator {
     return this.columnEditor.validator || this.columnDef.validator;
@@ -68,7 +73,7 @@ export class DateEditor implements Editor {
       };
 
       // merge options with optional user's custom options
-      const pickerMergedOptions = { ...pickerOptions, ...this.columnEditor.editorOptions };
+      const pickerMergedOptions = { ...pickerOptions, ...this.editorOptions };
       const inputCssClasses = `.editor-text.editor-${columnId}.flatpickr`;
 
       this.$input = $(`<input type="text" data-defaultDate="${this.defaultDate}" class="${inputCssClasses.replace(/\./g, ' ')}" placeholder="${placeholder}" title="${title}" />`);
@@ -178,21 +183,22 @@ export class DateEditor implements Editor {
 
     // when it's a complex object, then pull the object name only, e.g.: "user.firstName" => "user"
     const fieldNameFromComplexObject = fieldName.indexOf('.') ? fieldName.substring(0, fieldName.indexOf('.')) : '';
-    item[fieldNameFromComplexObject || fieldName] = state ? moment(state, outputFormat).toDate() : '';
+    const newValue = state ? moment(state, outputFormat).toDate() : '';
+    const validation = this.validate(newValue);
+    item[fieldNameFromComplexObject || fieldName] = (validation && validation.valid) ? newValue : '';
   }
 
   isValueChanged() {
     return (!(this.$input.val() === '' && this.defaultDate == null)) && (this.$input.val() !== this.defaultDate);
   }
 
-  validate(): EditorValidatorOutput {
+  validate(inputValue?: any): EditorValidatorOutput {
     const isRequired = this.columnEditor.required;
-    const elmValue = this.$input && this.$input.val && this.$input.val();
+    const elmValue = (inputValue !== undefined) ? inputValue : this.$input && this.$input.val && this.$input.val();
     const errorMsg = this.columnEditor.errorMessage;
 
     if (this.validator) {
-      const value = this.$input && this.$input.val && this.$input.val();
-      return this.validator(value, this.args);
+      return this.validator(elmValue, this.args);
     }
 
     // by default the editor is almost always valid (except when it's required but not provided)

src/app/modules/angular-slickgrid/editors/floatEditor.ts

@@ -140,7 +140,8 @@ export class FloatEditor implements Editor {
     const fieldName = this.columnDef && this.columnDef.field;
     // when it's a complex object, then pull the object name only, e.g.: "user.firstName" => "user"
     const fieldNameFromComplexObject = fieldName.indexOf('.') ? fieldName.substring(0, fieldName.indexOf('.')) : '';
-    item[fieldNameFromComplexObject || fieldName] = state;
+    const validation = this.validate(state);
+    item[fieldNameFromComplexObject || fieldName] = (validation && validation.valid) ? state : '';
   }
 
   isValueChanged() {
@@ -163,8 +164,8 @@ export class FloatEditor implements Editor {
     }
   }
 
-  validate(): EditorValidatorOutput {
-    const elmValue = this.$input.val();
+  validate(inputValue?: any): EditorValidatorOutput {
+    const elmValue = (inputValue !== undefined) ? inputValue : this.$input && this.$input.val && this.$input.val();
     const floatNumber = !isNaN(elmValue as number) ? parseFloat(elmValue) : null;
     const decPlaces = this.getDecimalPlaces();
     const isRequired = this.columnEditor.required;

src/app/modules/angular-slickgrid/editors/integerEditor.ts

@@ -99,7 +99,8 @@ export class IntegerEditor implements Editor {
     const fieldName = this.columnDef && this.columnDef.field;
     // when it's a complex object, then pull the object name only, e.g.: "user.firstName" => "user"
     const fieldNameFromComplexObject = fieldName.indexOf('.') ? fieldName.substring(0, fieldName.indexOf('.')) : '';
-    item[fieldNameFromComplexObject || fieldName] = state;
+    const validation = this.validate(state);
+    item[fieldNameFromComplexObject || fieldName] = (validation && validation.valid) ? state : '';
   }
 
   isValueChanged() {
@@ -124,8 +125,8 @@ export class IntegerEditor implements Editor {
     }
   }
 
-  validate(): EditorValidatorOutput {
-    const elmValue = this.$input.val();
+  validate(inputValue?: any): EditorValidatorOutput {
+    const elmValue = (inputValue !== undefined) ? inputValue : this.$input && this.$input.val && this.$input.val();
     const intNumber = !isNaN(elmValue as number) ? parseInt(elmValue, 10) : null;
     const errorMsg = this.columnEditor.errorMessage;
     const isRequired = this.columnEditor.required;

src/app/modules/angular-slickgrid/editors/longTextEditor.ts

@@ -168,7 +168,8 @@ export class LongTextEditor implements Editor {
     const fieldName = this.columnDef && this.columnDef.field;
     // when it's a complex object, then pull the object name only, e.g.: "user.firstName" => "user"
     const fieldNameFromComplexObject = fieldName.indexOf('.') ? fieldName.substring(0, fieldName.indexOf('.')) : '';
-    item[fieldNameFromComplexObject || fieldName] = state;
+    const validation = this.validate(state);
+    item[fieldNameFromComplexObject || fieldName] = (validation && validation.valid) ? state : '';
   }
 
 
@@ -189,14 +190,13 @@ export class LongTextEditor implements Editor {
     }
   }
 
-  validate(): EditorValidatorOutput {
+  validate(inputValue?: any): EditorValidatorOutput {
     const isRequired = this.columnEditor.required;
-    const elmValue = this.$textarea && this.$textarea.val && this.$textarea.val();
+    const elmValue = (inputValue !== undefined) ? inputValue : this.$textarea && this.$textarea.val && this.$textarea.val();
     const errorMsg = this.columnEditor.errorMessage;
 
     if (this.validator) {
-      const value = this.$textarea && this.$textarea.val && this.$textarea.val();
-      return this.validator(value, this.args);
+      return this.validator(elmValue, this.args);
     }
 
     // by default the editor is almost always valid (except when it's required but not provided)

src/app/modules/angular-slickgrid/editors/selectEditor.ts

@@ -274,22 +274,23 @@ export class SelectEditor implements Editor {
   applyValue(item: any, state: any): void {
     const fieldName = this.columnDef && this.columnDef.field;
     const fieldType = this.columnDef && this.columnDef.type;
-    let value = state;
+    let newValue = state;
 
     // when the provided user defined the column field type as a possible number then try parsing the state value as that
     if (fieldType === FieldType.number || fieldType === FieldType.integer || fieldType === FieldType.boolean) {
-      value = parseFloat(state);
+      newValue = parseFloat(state);
     }
 
     // when set as a multiple selection, we can assume that the 3rd party lib multiple-select will return a CSV string
     // we need to re-split that into an array to be the same as the original column
     if (this.isMultipleSelect && typeof state === 'string' && state.indexOf(',') >= 0) {
-      value = state.split(',');
+      newValue = state.split(',');
     }
 
     // when it's a complex object, then pull the object name only, e.g.: "user.firstName" => "user"
     const fieldNameFromComplexObject = fieldName.indexOf('.') ? fieldName.substring(0, fieldName.indexOf('.')) : '';
-    item[fieldNameFromComplexObject || fieldName] = value;
+    const validation = this.validate(newValue);
+    item[fieldNameFromComplexObject || fieldName] = (validation && validation.valid) ? newValue : '';
   }
 
   destroy() {
@@ -365,13 +366,13 @@ export class SelectEditor implements Editor {
     return this.$editorElm.val() !== this.defaultValue;
   }
 
-  validate(): EditorValidatorOutput {
+  validate(inputValue?: any): EditorValidatorOutput {
     const isRequired = this.columnEditor.required;
-    const elmValue = this.$editorElm && this.$editorElm.val && this.$editorElm.val();
+    const elmValue = (inputValue !== undefined) ? inputValue : this.$editorElm && this.$editorElm.val && this.$editorElm.val();
     const errorMsg = this.columnEditor.errorMessage;
 
     if (this.validator) {
-      const value = this.isMultipleSelect ? this.currentValues : this.currentValue;
+      const value = (inputValue !== undefined) ? inputValue : (this.isMultipleSelect ? this.currentValues : this.currentValue);
       return this.validator(value, this.args);
     }
 

src/app/modules/angular-slickgrid/editors/sliderEditor.ts

@@ -119,7 +119,8 @@ export class SliderEditor implements Editor {
     const fieldName = this.columnDef && this.columnDef.field;
     // when it's a complex object, then pull the object name only, e.g.: "user.firstName" => "user"
     const fieldNameFromComplexObject = fieldName.indexOf('.') ? fieldName.substring(0, fieldName.indexOf('.')) : '';
-    item[fieldNameFromComplexObject || fieldName] = state;
+    const validation = this.validate(state);
+    item[fieldNameFromComplexObject || fieldName] = (validation && validation.valid) ? state : '';
   }
 
   isValueChanged() {
@@ -131,8 +132,8 @@ export class SliderEditor implements Editor {
     return (!(elmValue === '' && this.defaultValue === null)) && (elmValue !== this.defaultValue);
   }
 
-  validate(): EditorValidatorOutput {
-    const elmValue = this.$input.val();
+  validate(inputValue?: any): EditorValidatorOutput {
+    const elmValue = (inputValue !== undefined) ? inputValue : this.$input && this.$input.val && this.$input.val();
     const isRequired = this.columnEditor.required;
     const minValue = this.columnEditor.minValue;
     const maxValue = this.columnEditor.maxValue;

src/app/modules/angular-slickgrid/editors/textEditor.ts

@@ -99,7 +99,8 @@ export class TextEditor implements Editor {
     const fieldName = this.columnDef && this.columnDef.field;
     // when it's a complex object, then pull the object name only, e.g.: "user.firstName" => "user"
     const fieldNameFromComplexObject = fieldName.indexOf('.') ? fieldName.substring(0, fieldName.indexOf('.')) : '';
-    item[fieldNameFromComplexObject || fieldName] = state;
+    const validation = this.validate(state);
+    item[fieldNameFromComplexObject || fieldName] = (validation && validation.valid) ? state : '';
   }
 
   isValueChanged() {
@@ -121,9 +122,9 @@ export class TextEditor implements Editor {
     }
   }
 
-  validate(): EditorValidatorOutput {
+  validate(inputValue?: any): EditorValidatorOutput {
     const isRequired = this.columnEditor.required;
-    const elmValue = this.$input && this.$input.val && this.$input.val();
+    const elmValue = (inputValue !== undefined) ? inputValue : this.$input && this.$input.val && this.$input.val();
     const errorMsg = this.columnEditor.errorMessage;
 
     if (this.validator) {