CODEWITHSUNDEEP
angularvalidationprimengp-tablep-dropdown
OhJohnny
OhJohnny

Reputation: 351

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?

Upvotes: 1

Views: 61

Answers (1)

Naren Murali
Naren Murali

Reputation: 58274

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

Upvotes: 1

Related Questions