angularvalidationprimengp-tablep-dropdown

Looking for a workaround for: p-dropdown in p-table with class="ng-invalid" prevents other inputs in table to be edited

In an Angular (17.3.12) and Primeng (17.18.6) environment,

I have a p-table with p-dropdown columns in it that are editable. As soon as a p-dropdown gets the class="ng-invalid" out of validation reasons, it doesn't let me click on other inputs in the table until i refresh with F5.

I reported this issue already on the official primeng github page.

Here is a demo to show that a dropdown with a class="ng-invalid" causes other inputs to not be accessible.

Removing the "ng-invalid" class is no option, since I need it for validation reasons.

Is there a workaround for this?

Solution

  • I would most definetely classify this as a hackish workaround.

    I snooped the source code and the editing is cancelled only when the cell is valid, so I just override the method for that particular table with the valid function always returning true.

    You can raise a feature request on the primeng website for a flag to toggle this feature and it will be created in the future. Until then this workaround seems to work fine.

    ...
export class DropdownBasicDemo implements OnInit {
  @ViewChild(Table, { static: true }) table: Table;
  dropdownoptions = [];

  products = [];

  ngOnInit() {
    this.table.isEditingCellValid = () => true; // <- changed here!
    ...

    Stackblitz Demo