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)`; };
That helps. I'm noticing, though, that the value selected in the dropdown columns is erased when you click into the dropdown field. This is definitely not ideal as some dropdown fields (in other pages) will literally have 100s of options . Can you fix that issue in your example and let me know what the resolution there is?
I was unable to declare the Subscription, uninitialized for this warning: Property 'inputSubscription' has no initializer and is not definitely assigned in the constructor.ts(2564)
I changed the entry in TS to the following, which gets rid of the error, but also generates a new one when changing the value of the column (expanded below snippet):
private inputSubscription: Subscription = Object.create(null);
ERROR TypeError: this.inputSubscription.unsubscribe is not a function at ScenariosComponent.modelChange (scenarios.component.ts:49) at ScenariosComponent_div_0_ng_template_10_Template_input_ngModelChange_1_listener (scenarios.component.html:19) at executeListenerWithErrorHandling (core.js:14994) at wrapListenerIn_markDirtyAndPreventDefault (core.js:15035) at SafeSubscriber.schedulerFn [as _next] (core.js:25687) at SafeSubscriber.__tryOrUnsub (Subscriber.js:183) at SafeSubscriber.next (Subscriber.js:122) at Subscriber._next (Subscriber.js:72) at Subscriber.next (Subscriber.js:49) at EventEmitter_.next (Subject.js:39)
1) While the Ignite UI for Angular suite provides built-in Snackbar and Toast components, I suppose they do not fit your particular requirement about positioning the warning in the upper-right corner of the grid. Nevertheless, here is an additional sample applying an IgxToast, positioned at the top of the page.
So, to have more control over the warning’s position, my suggestion is to use the IgxTooltip. It can accept an OverlaySettings object as a parameter of its open method. With the help of the positionStrategy property and its PositionSettings object, the tooltip can be placed accordingly. The target of the OverlaySettings can be directly specified as the grid's nativeElement, or as done in the sample - as a point (using the grid’s html element ClientRect and specifying a bit of an offset, so that the tooltip is slightly distanced from the grid’s bounds).
2) The warning span’s implementation is same as yours.
3) Disabling the igxRowEditActions’ “Done” button by binding its “disabled” property to the “badName” variable.