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)

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 cannot tell what has changed to affect retaining the value.

Here is what I currently have for my column with a dropdown (not retaining value upon dropdown):

        <igx-column field="scenarioType" header="Type" [dataType]="'string'" [resizable]="true" width="83px" [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)" [data]="types" width="220px" [igxFocus]="true" (onSelectionChange)="singleSelection($event)" [overlaySettings]="customOverlaySettings"></igx-combo>
            </ng-template>
        </igx-column>

A further frustration I've overcome is the use of @ViewChild with *ngIf in the grid. I figured out for myself that you need @ViewChildren when your component reference is gated by a conditional, which mine is due to asynchronously loading the list of Scenarios.

Here is what I have in the component.ts for this:

  @ViewChildren('scenarioList', { read: IgxGridComponent }) public scenarioList: IgxGridComponent;
  customOverlaySettings:OverlaySettings;
  types:string[] = [];
  ngOnInit(): void {
    this.getScenarios();
    this.getScenarioTypes(); //sets values to types:string[]
    this.getHorizons();
    this.getWorkweeks();
  }

ngAfterViewInit() {
    this.customOverlaySettings = { outlet: this.scenarioList.outlet };
  }

  modelChange(event:any, cell:IgxGridCellComponent) {
    if (this.inputSubscription) { this.inputSubscription.unsubscribe(); }
    let type:string = this.types.indexOf(event[0]) > -1 ? event[0] : cell.rowData.scenarioType, prefix:string = '';
    this.inputSubscription = of(event).pipe(delay(500), distinctUntilChanged())
      .subscribe(eventVal => {
        if (type == 'Commit' && !/^PLAN\_[0-9]{4}\_[0-9]{2}[a-zA-Z0-9\_\-]{0,38}$/.test(eventVal)) {
          this.badName = true;
          prefix = 'PLAN';
        }
        else if (type == 'Scenario' && !/^BETA\_[0-9]{4}\_[0-9]{2}[a-zA-Z0-9\_\-]{0,38}$/.test(eventVal)) {
          this.badName = true;
          prefix = 'BETA';
        }
        else if (type == 'LRP' && !/^LRP\_[0-9]{4}\_[0-9]{2}[a-zA-Z0-9\_\-]{0,39}$/.test(eventVal)) {
          this.badName = true;
          prefix = 'LRP';
        } else {
          this.badName = false;
        }
        this.badNameWarning = prefix !== '' ? `${type} Name should be: ${prefix}_YYYY_WW(optional [a-z,A-Z,0-9,-,_] to 50 total)` : '';
      });
  };

  singleSelection(event: IComboSelectionChangeEventArgs) { if (event.added.length) { event.newSelection = event.added; } };

I only filled out for the first 3 scenario types, but I assume it makes sense for the whole group. Validation is applied whether the Scenario Name or Type is changed. That portion is working like a charm and I am saving the Toast/ToolTip for save responses on the attributes of Scenario.

Regardless, the dropdown doesn't persist the populated scenario type when opened: no value is currently selected.

Your latest sample prevents updating the other column when the value in the one you're editing doesn't match validation. This is not what I wanted. I will have to reassign values to the Combo to ensure the data that hasn't changed is still persisted.

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.