Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
935
Firm Validation on column using REGEX
posted

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)`;
 };

Parents Reply Children
No Data