PropertyFieldNumber control suggestion

[PrPleGoo]

Category

[ x ] Enhancement

[ ] Bug

[ x ] Question

Version

Please specify what version of the library you are using: [ 1.4.1 ]

Expected / Desired Behavior / Question

It would be great if I could configure a property as a Function. This function can be used to validate the number in the field. This would allow me to have more control over the input number. A quick example for only allowing evens:

PropertyFieldNumber('EvenNumber', {
    key: 'EvenNumber',
    evalutationError: 'Only even numbers please!',
    evaluation: function(value) { return value % 2 == 0; }
})

If the evaluation function fails it could display the custom message which could default to "The custom evaluation failed.".

[estruyf]

I implemented the onGetErrorMessage property as this is one of the default validation properties. If you want to test it out, you will have to use the latest beta version.

More information on using a beta version can be found here: https://sharepoint.github.io/sp-dev-fx-property-controls/beta/

In the dev branch you can find the documentation of the new property: https://github.com/SharePoint/sp-dev-fx-property-controls/blob/4e6bfee36855cd25fba51df292c231d9d72fdaeb/docs/documentation/docs/controls/PropertyFieldNumber.md

[PrPleGoo]

It looks like this is exactly what I'm looking for. I feel the documentation is a little open to interpretation though, but that it could be me.

The documentation states that the function is used to both get the validation message and validate the input.

(value: number) => string
If set, this method is used to get the validation error message and determine whether the input value is valid or not.

Does that mean that my earlier example could be implemented as following:

PropertyFieldNumber('EvenNumber', {
    key: 'EvenNumber',
    onGetErrorMessage: function (value : number) { 
        if (value % 2 == 0) { return ''; } 
        else { return 'Only even numbers please!'; }
    }
})

It would make sense that if the error message is empty that there is no error. Is that the case?

[estruyf]

The controls behavior should be as close to the behavior of the default controls used in SPFx. So that is why I implemented it via the onGetErrorMessage in which you can indeed validate the value and return a string with the validation message. An empty string means that there is no problem.

I had implemented your sample in the documentation:

onGetErrorMessage: (value: number) => {
  if (value % 2 !== 0) {
    return 'Only even numbers are allowed';
  }
  return '';
}

Your code will also work.