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)

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.

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.