I am using Angular 11 and 2020-Dec IG build.
My grid has a column of Name (string) and a column of Type (dropdown of static string-type choices). The validation of Name is based on Type and a regex that looks like this: /^PLAN\_[0-9]{4}\_[0-9]{2}[a-zA-Z0-9\_]{0,39}$/
"PLAN" is one of many prefixes that align with specific types and are not interchangeable.
What I need is a dynamically appearing warning about the Name not properly validating and prevention of submission by either click or enter keypress. I intend to have a warning snackbar floating in the upper right corner of the grid (zindex = 999), a warning span in the igxRowEditText area, and the "done" button in the igxRowEditActions area disabled until the Name matches the correct format.
I am finding that (onCellEdit) is not working for me, neither is (keypress) or (input) on my template for the column.
HTML template for Name and igxRowEditText:
<ng-template igxRowEditText> <span class="error" *ngIf="badName">{{badNameWarning}}</span> </ng-template> <igx-column [pinned]="true" field="name" header="Scenario Name" [dataType]="'string'" [resizable]="true" width="246px" [sortable]="true"> <ng-template igxCellEditor let-cell="cell"> <igx-input-group> <input igxInput [igxFocus]="true" name="ScenarioName" [(ngModel)]="cell.editValue" (keypress)="validateName(cell.editValue, cell.scenarioType)"> </igx-input-group> </ng-template> </igx-column>
Handling in my Component:
//validation badName:boolean = false; badNameWarning:string = ''; validateName(scenName:string, type:string) { let prefix:string = ''; this.badName = false; if (type == 'Commit' && !/^PLAN\_[0-9]{4}\_[0-9]{2}[a-zA-Z0-9\_]{0,39}$/.test(scenName)) { this.badName = true, prefix = 'PLAN'; } ...else if (type == ...types this.badNameWarning = `${type} Name should be: ${prefix}_YYYY_WW(optional [a-z,A-Z,0-9,-,_] to 50 total)`; };
Hello Chris,
Thank you for clarifying the current version you are using.
Yes, there have been some breaking changes between versions 11 and 12, such as the IgxGridCellComponent being deprecated and replaced by IgxGridCell, as well as the onSelectionChange output of the igx-combo renamed to selectionChanging. Looking at your snippets, I can see that you have addressed those changes accordingly. All changes are listed in our Changelog here.
Attached you will find the sample updated with Angular major v.12 and IgniteUI v.12.3.13. On my side, the validation when changing the selection in the igx-combo in the “Category” field seems to be working correctly, as far as my understanding of the requirement. Please, check it out and let me know whether it properly reflects the idea. Generally, I do not think that there is an issue with the IgxGrid regarding this feature, as this is not built-in functionality, but rather a custom validation-message implementation. In case the sample shows such validation working alright, please, compare any discrepancies between it and your app code. The test project is really simple and its purpose is to isolate the logix as much as possible, so that wat may not be working could be easily reproduced.
Please, keep me posted on your progress.
Best regards, Bozhidara Pachilova
6014.igx-grid-editing-validation-with-tooltip-extended-12.3.zip
I apologize. I'm now on AG/IG 12.3 and I forgot to include the column templates for scenario Name and Type. I have added them to the previous response.
The scenarioExists function is used in both cases and only triggered if the name is valid by validation via RegEx.
My assumption is that implementation has changed since AG/IG 11 or that there is a significant difference in the way this should be implemented when moving from a formless (stand-alone input fields) modal to the ig-grid interaction with embedded forms.
If you do not believe the transition from IGX 11 to 12.3 is significant, let me know and I will modify the above sample. Otherwise, let me know when you can have a similar sample with 12.3 implementation changes ready.
As it is been a while since our last communication in this thread, it is possible that the StackBlitz environment has undergone version requirements changes. For your convenience, I am attaching the sample with igniteui-angular major version 11 below, so that you could run it locally. In case you have upgraded major versions since then, it is possible that breaking changes, related to the grid functionalities used might have been introduced, so if that is the case, please let me know.
The sample is also modified, so that validation logic is executed only when the “Category” field is edited, based on your latest clarifications.
However, I am afraid that currently it is pretty unclear to me as to what the issue you are facing might be. I encourage you to run the attached sample on your side, modify it, so that it reflects what you would like to achieve and possibly reproduce the issue you are facing. As you mentioned yourself, specific requirements are complex and often subject to change. Having this in mind, providing us with small isolated samples with steps and description (such as comments) would be most effective, so that we can assist you. For example, in the provided snippets, there are still missing pieces, such as the “scenarioExists” method and possibly other details, which might be related to anything going on. There might also be template code errors, for instance.
Lastly, please keep in mind that the sample uses simple regular expressions for demo purposes. As you mention that the validation works for you in another configuration, I suppose the expressions themselves are not the issue here. In any case, assisting with custom regex patterns would be considered out of scope of Infragistics Support.
Best regards,Bozhidara PachilovaInfragistics
5635.igx-grid-editing-validation-with-tooltip-extended.zip
I have cleaned up the logic for efficiency and modified again, per users' changing requirements. At present, the validation is based upon this REGEX: /^(LRP|LTP|PLAN|TOP)\_[0-9]{4}\_[0-9]{2}[a-zA-Z0-9\_\-]{0,38}$/.
Current implementation works with validating fields in a copy modal, as seen here:
validateName(type:string) { let prefix:string = type === 'Commit' ? 'PLAN' : type === 'Scenario' ? '(LRP|LTP|PLAN|TOP)' : type, regex:RegExp = new RegExp(`^${prefix}\_[0-9]{4}\_[0-9]{2}[a-zA-Z0-9\_\-]{0,${prefix.length === 3 ? 39 : 38}}$`); this.scenario.scenarioType = type, this.scenario.scenarioTypeId = this.types.filter(t => t.name === type)[0].id, this.badNameCopy = !regex.test(this.scenario.name), this.badNameCopyWarning = this.badNameCopy ? `${type} Name should be: ${prefix}_YYYY_WW(optional [a-z,A-Z,0-9,-,_] to 50 total)` : ''; if (!this.badNameCopy) { this.scenarioExists(this.scenario.name, 'copy'); } };
Yet, when implemented in a similar way on the Scenarios grid, it fails to validate any name, no matter what the entry. Here is my updated code for modelChange:
modelChange(event:any, cell:IgxGridCell, method:string) { if (this.inputSubscription) { this.inputSubscription.unsubscribe(); } let type:string = method === 'type' ? event[0] : cell.row.data.scenarioType, prefix:string = type === 'Commit' ? 'PLAN' : type === 'Scenario' ? '(LRP|LTP|PLAN|TOP)' : type, regex:RegExp = new RegExp(`^${prefix}\_[0-9]{4}\_[0-9]{2}[a-zA-Z0-9\_\-]{0,${prefix.length === 3 ? 39 : 38}}$`); this.inputSubscription = of(event).pipe(distinctUntilChanged()).subscribe(eventVal => { this.badName = !regex.test(eventVal.length > 9 ? eventVal : cell.row.data.name), this.badNameWarning = this.badName ? `${type} Name should be: ${prefix}_YYYY_WW(optional [a-z,A-Z,0-9,-,_] to 50 total)` : ''; if (method === 'name' && !this.badName) { this.scenarioExists(eventVal.length > 9 ? eventVal : cell.row.data.name, 'update'); } }); };
Here is the HTML implementation of the scenario Name and Type columns in the grid:
<igx-column [pinned]="true" field="name" header="Scenario Name" [dataType]="'string'" [resizable]="true" width="12%" [sortable]="true"> <ng-template igxCellEditor let-cell="cell"> <igx-input-group type="border"> <input igxInput [igxFocus]="true" [(ngModel)]="cell.editValue" (ngModelChange)="modelChange($event, cell, 'name')" displayDensity="compact"> </igx-input-group> </ng-template> </igx-column> <igx-column field="scenarioType" header="Type" [resizable]="true" width="5%" [sortable]="true"> <ng-template igxCell let-cell="cell">{{cell.value}}</ng-template> <ng-template igxCellEditor let-cell="cell" let-value> <igx-combo [(ngModel)]="cell.editValue" (ngModelChange)="modelChange($event, cell, 'type')" [data]="types" width="220px" [igxFocus]="true" (selectionChanging)="singleSelection($event)" [overlaySettings]="customOverlaySettings" [displayKey]="'name'" [valueKey]="'name'"></igx-combo> </ng-template> </igx-column>
Perhaps you can see where I'm going wrong with this.
In case it's unclear, a 'Commit' scenario type should have a prefix of "PLAN", other scenario types (LRP, LTP, TOP) will have their type name as the prefix, and Scenario can have any of those prefixes. Additionally, the ScenarioExists function verifies the name is not already assigned to an existing scenario of any type in the database.
Also, your samples are broken due to changes in the imported styling libraries.
You're double-binding the double-binding, which is the issue. In my case, I'm only reading the change on the category and applying validation to the Name. In this way, users are able to change either field without being restricted to that field when making the change. I can't imagine why you would have built it so you can't actually change the category. That was obviously not what I was looking for.
As it showed me how to get where I wanted to go, I marked it as the answer anyway.