I have finally had a chance to revisit this issue and discovered that it does not allow the user to remove the date from the cell. Unfortunately this means that this is not a viable solution.

And even more unfortunately, this now presents us with an even more severe problem because we are attempting to use this control in another grid in the details area and this grid checks the ng-invalid class on the cell. Since the cell containing the date control is being marked as invalid when there is no value, the user can never exit editing on the date cell.

Can you please suggest another way that we can prevent the date control from being marked as invalid when the user has cleared the value by deleting the date using the keyboard?

Ah, that is fantastic and does solve the problem, thank you!

Is there a general rule about when the brackets should be supplied and when they shouldn't? I have seen a wide variation and haven't really been able to figure out which usage is correct in which circumstances.

Is there any update on this issue? This is an absolutely critical problem for us.

Thank you for the sample.

While the value is allowed to be cleared using the button, the sample still shows the problem of the date reporting it is invalid (the bright red outline), which I think is incorrect behavior.

Thank you for the response and sample. Unfortunately, I am able to reproduce this at will using the sample once I set autogenerate to false.

I have updated the sample here

If that doesn't work, you should be able to set autogenerate to false, select load empty data first, then look at the column headers. They should display the name of the field, not the caption:

I realized that I forgot to mention some fairly critical information here: our grid columns are not fixed in HTML, they are configured dynamically based on the current view's needs.

Basically, we provide a plain array of column configuration information and then configure each type of column through templates that are picked based on the type of data the column represents.

Here is q quick example of the configuration (this is not complete):

<igx-grid #grid autoGenerate="false" [pinning]="pinningConfig" [primaryKey]="primaryKey" rowSelection="multiple" cellSelection="none">
    <igx-column *ngFor="let col of columns" [header]="col.caption" [headerClasses]="col.class" [field]="col.columnName" [resizable]="true" [sortable]="columnIsSortable(col)" [editable]="columnIsEditable(col)" [width]="col.widthPX" [hidden]="!col.visible" [pinned]="col.frozen" [dataType]="col.dataTypeAngular">
        <ng-template igxRowSelector let-rowContext>
            <div class="row-selector">
                <igx-checkbox [readonly]="true" [checked]="rowContext.selected" [disabled]="!gridIsEditable()">
                </igx-checkbox>
            </div>
        </ng-template>
        <!– Display –>
        <ng-template igxCell let-val let-cell="cell" *ngIf="col.formatAsDate">
            <div class="grid-cellContent {{col.class}}" [ngClass]="{'notoktoedit': !cellIsEditable(cell)}">{{formatDate(col, val)}}</div>
        </ng-template>
        <ng-template igxCell let-val let-cell="cell" *ngIf="col.formatAsNumber">
            <div class="grid-cellContent {{col.class}}" [ngClass]="{'notoktoedit': !cellIsEditable(cell)}">{{formatNumber(col, val)}}</div>
        </ng-template>

So, I think what happens is that when the grid decides to add or remove the rowSelector column, this column configuration is not re-examined.

I tried to look at which events might let me know when this happens and tried various method calls such as cdr.detectChanges and reflow, but nothing helps.

Thank you for the response.

Unfortunately we were only able to use a portion of the solution: pipeArgs didn't work for some reason. Part of the issue is that we dynamically configure the columns.

What we ended up doing was using the angular formatNumber method for the display portion and then number.toFixed to trim excessive decimal positions entered by the user.

Here is an example of our configuration:

    <igx-column *ngFor="let col of columns" [header]="col.caption" [headerClasses]="col.class" [field]="col.columnName" [resizable]="true" [sortable]="columnIsSortable(col)" [editable]="columnIsEditable(col)" [width]="col.widthPX" [hidden]="!col.visible" [pinned]="col.frozen" [dataType]="col.dataTypeAngular">

        <ng-template igxCell let-val let-cell="cell" *ngIf="col.formatAsNumber">
            <div class="grid-cellContent {{col.class}}" [ngClass]="{'notoktoedit': !cellIsEditable(cell)}">{{formatNumber(col, val)}}</div>
        </ng-template>