You can install
npm i --save @ui-grid/validate
Once you install you need to load the respective JS and CSS files as seen bellow:
Alternatively, if you are using Webpack or RequireJS to load your dependencies, you can do the following at the top of the file that needs it:
Once you load the file, you need to include 'ui.grid.validate' and 'ui.grid.edit' modules in your angularJS app's dependencies, and add both the ui-grid-validate and ui-grid-edit directives to your grid element.
Validation is based on validation functions defined at service level (thus valid through all the application).
Some custom validators come with the plugin and are:
- required: to ensure that a field is not empty.
- minLength: to ensure that the value inserted is at least X characters long.
- maxLength: to ensure that the value inserted is at most X characters long.
To define a new validator you should use the setValidator method.
To add a validator to a column you just need to add a validators property to its colDef object, containing a property for each validator you want to add. The name of the property will set the validator and the value of the property will be treated as an argument by the validator function.
When a field does not pass validation it gets a invalid class so you can customize it via css.
The plugin adds 2 templates to ui-grid:
- cellTitleValidator which adds the error message to the title attribute of the cell.
- cellTooltipValidator which depends on ui-bootstrap to add a tooltip.
You can find an example of this plugin in action on our website
Documentation for this plugin is provided in the api documentation, but we recommend that you pay special attention to the following: