Edition validation
This section describes how you can validate user input and show validation messages.
Live example
Edition validation live example.
Validator functions
Since the DikeGrid base the edition module in the Angular's Reactive Forms model, you add validator functions to the columns definition.
Let us begin defining some columns as editable with validators:
<dike-grid id="grid-edition-validation" height="600px" #grid="dkgGrid">
<dike-grid-column
fieldName="employeeId"
headerText="Employee Id"
dataType="Text"
width="350">
</dike-grid-column>
<dike-grid-column
fieldName="completeNameGroup"
headerText="Complete Name">
<dike-grid-column
fieldName="firstName"
headerText="Name"
dataType="Text"
width="150"
editable
[editionSettings]="nameEditionSettings">
</dike-grid-column>
<dike-grid-column
fieldName="lastName"
headerText="Surname"
dataType="Text"
width="150"
editable
[editionSettings]="lastNameEditionSettings">
</dike-grid-column>
</dike-grid-column>
<dike-grid-column
fieldName="gender"
headerText="Gender"
dataType="Binary"
width="110"
editable
[editionSettings]="genderEditionSettings">
</dike-grid-column>
<dike-grid-column
fieldName="age"
headerText="Age"
dataType="Numeric"
contentAlign="center"
width="100"
editable
[editionSettings]="ageEditionSettings">
</dike-grid-column>
<dike-grid-column
fieldName="email"
headerText="Email"
dataType="Text"
width="300"
editable
[editionTemplate]="emailEdition"
[editionSettings]="emailEditionSettings">
</dike-grid-column>
<dike-grid-column
fieldName="hireDate"
headerText="Hire Date"
dataType="Date"
editable
[editionSettings]="hireDateEditionSettings">
</dike-grid-column>
</dike-grid>
We have defined the following features:
Firstly, all the columns are required.
The Name column maximum length is 12.
The Surname column maximum length is 15.
The Age column only accepts values from 22 and 60.
We intentionally left the Email and Hire Date columns with no validators because we set them using the API.
Conveying error messages
When a field value does not meet the validator criteria, the DikeGrid displays a red bar at the left of the field.
You click on the red bar to see the specific validation message.

Standard validation messages
We have seen how to display the validation message specific to a field.
The DikeGrid offers default validation messages when validators throw an error.
To see the complete list of validation messages, see the DikeStandardErrorMessage
class definition.
Custom validation messages
You can provide custom validation messages by providing an Injection Token or at the column level.
Messages by providing an Injection Token
When you modify or add validation messages by providing an Injection Token, you affect all your DikeGrid instances that live under the place you give your Injection Token.
Let us overwrite the required validator.
@NgModule({
providers: [
{ provide: CUSTOM_EDITION_ERROR_MESSAGES,
useFactory: (): CustomErrorMessage =>
new CustomErrorMessage()
.addMessage(ErrorType.REQUIRED, 'You can not leave the field empty.')
}
]
})
export class EditingModule { }
As you can see, all the columns show the required validator message defined in the module.

Messages at the column level
When you want to be more specific in the messages you want to convey, you can define those messages at the column level.
In the following code snippet, we overwrite several validators' messages.
ngOnInit(): void {
// ...
// Define the column edition settings:
this.nameEditionSettings = {
required: true,
validators: [ Validators.maxLength(12) ],
errorMessages: new CustomErrorMessage()
.addMessage(ErrorType.MAX_LENGTH, 'The Name column maximum length must be 12.')
};
this.lastNameEditionSettings = {
required: true,
validators: [ Validators.maxLength(15) ],
errorMessages: new CustomErrorMessage()
.addMessage(ErrorType.MAX_LENGTH, 'The Surname column maximum length must be 15.')
};
this.genderEditionSettings = {
required: true,
options: [ { label: 'M', value: 'male' }, { label: 'F', value: 'female' } ]
};
this.ageEditionSettings = {
required: true,
validators: [ Validators.min(22), Validators.max(60) ],
errorMessages: new CustomErrorMessage()
.addMessage(ErrorType.REQUIRED, 'You must enter the age of the employee.')
.addMessage(ErrorType.MIN, 'The minimum age to be hired must be 22 years old.')
.addMessage(ErrorType.MAX, 'The maximum age to be hired must be 60 years old.')
};
this.emailEditionSettings = { required: true };
this.hireDateEditionSettings = { required: true };
}
When running the live example, pay attention to the required validator for the Age column.

The column level definition has the highest precedence despite overwriting the required validator at the module level. Therefore, the DikeGrid shows the Age column required-validator message.
Custom validators
If the pre-built Angular validators are not enough for your use cases, you can create your custom validators.
See the following code snippet.
ngOnInit(): void {
//...
// Define the column edition settings:
this.nameEditionSettings = {
required: true,
validators: [ Validators.maxLength(12), forbiddenNameValidator(/erick/i) ],
errorMessages: new CustomErrorMessage()
.addMessage(ErrorType.MAX_LENGTH, 'The Name column maximum length must be 12.')
.addMessage('forbiddenName', 'The Name column can not contain the erick string.')
};
//...
}
We have taken the custom validator forbiddenNameValidator from the Angular docs and attached it to the Name column. The custom validator does not allow the user to type a name that contains the erick
string.
We have attached a custom message to the forbiddenNameValidator validator as well.

Cross-field validation
When defining columns, the DikeGrid add them to the center panel if you do not specify a different panel for each column. Therefore, a DikeGrid instance could have one panel (center panel) or three (left, center, and right panels).
When you allow the user to edit rows, the DikeGrid creates one FormGroup for the entire row, one FormGroup for each panel, and one FormControl for each column field.
Having said how the DikeGrid organizes the FormControl's and the FormGroup's, you can add cross-validation on the row-level FormGroup, the outermost FormGroup.
Let us define a custom cross-validator.
<dike-grid id="grid-edition-validation" height="600px" #grid="dkgGrid"
[gridEditionSettings]="gridEditionSettings">
</dike-grid>
In the previous code snippet:
We have defined a custom validator but following a specific signature that receives the related
DikeGridColumnDef
instance.We have also created the corresponding validator message.
Then, we have added the cross-validator to the edition settings at the level of the DikeGrid instance.
We recommend seeing the definition of the CrossFieldValidationSettings
and DikeGridEditionSettings
interfaces.

Assigning validators using the API
If you want to reconfigure validators functions at runtime, you can use the column API to achieve it.
Before using the API, we have to retrieve the DikeGrid instance from the component's view.
<dike-grid id="grid-edition-validation" height="600px" #grid="dkgGrid">
</dike-grid>
DikeGrid Column API
You can use the following method to assign validators at runtime.
setColumnEditable()
Use this method to set validators through the edition settings param.
For further details, see the DikeGridColumnDef
definition.
Consider the following additions to the UI:
<div class="mt-2 flex flex-row flex-wrap items-center justify-around">
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onEmailValidator()">Email validator
</button>
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onHireDateValidator()">Hire Date validator
</button>
</div>
<dike-grid id="grid-edition-validation" height="600px" #grid="dkgGrid">
</dike-grid>
The previous definition generates the following output:

We describe the button actions in the following list:
Email validator. Clicking on this button will add the email validator to the Email column.
Hire Date validator. This action adds the limitHireDateValidator custom validator to the Hire Date column.
The limitHireDateValidator custom validator prevents users from entering dates after the current date.

Summary
When using the Angular validator functions, the DikeGrid offers a set of validations messages. You can overwrite these validation messages or add new ones.
Finally, you can create custom validation functions at the column or row levels. You can assign these validators at column definition or runtime.
<div class="mt-2 flex flex-row flex-wrap items-center justify-around">
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onEmailValidator()">Email validator
</button>
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onHireDateValidator()">Hire Date validator
</button>
</div>
<dike-grid id="grid-edition-validation" height="600px" #grid="dkgGrid"
[displayRowId]="gridProperties.displayRowId"
[gridElevation]="gridProperties.matElevation"
[gridElevationValue]="gridProperties.elevationValue"
[striped]="gridProperties.stripeRows"
[verticalRowLines]="gridProperties.verticalRowLines"
allowEdition
[editionMode]="gridProperties.editionMode"
[gridEditionSettings]="gridEditionSettings"
[datasource]="dkgDataSource">
<dike-grid-column
fieldName="employeeId"
headerText="Employee Id"
dataType="Text"
width="350">
</dike-grid-column>
<dike-grid-column
fieldName="completeNameGroup"
headerText="Complete Name">
<dike-grid-column
fieldName="firstName"
headerText="Name"
dataType="Text"
width="150"
editable
[editionSettings]="nameEditionSettings">
</dike-grid-column>
<dike-grid-column
fieldName="lastName"
headerText="Surname"
dataType="Text"
width="150"
editable
[editionSettings]="lastNameEditionSettings">
</dike-grid-column>
</dike-grid-column>
<dike-grid-column
fieldName="gender"
headerText="Gender"
dataType="Binary"
width="110"
editable
[editionSettings]="genderEditionSettings">
</dike-grid-column>
<dike-grid-column
fieldName="age"
headerText="Age"
dataType="Numeric"
contentAlign="center"
width="100"
editable
[editionSettings]="ageEditionSettings">
</dike-grid-column>
<dike-grid-column
fieldName="email"
headerText="Email"
dataType="Text"
width="300"
editable
[editionTemplate]="emailEdition"
[editionSettings]="emailEditionSettings">
</dike-grid-column>
<dike-grid-column
fieldName="hireDate"
headerText="Hire Date"
dataType="Date"
editable
[editionSettings]="hireDateEditionSettings">
</dike-grid-column>
</dike-grid>
<ng-template #emailEdition let-control="control">
<mat-form-field floatLabel="never">
<input matInput
type="text"
[formControl]="control"
autocomplete="off">
<mat-icon matSuffix>email</mat-icon>
</mat-form-field>
</ng-template>
Last updated