Flexgrid validation after every keystroke / while editing

Flexgrid validation after every keystroke / while editing

Posted by: webworx on 23 May 2018, 11:49 am EST

• 

  webworx

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 May 2018, 11:49 am EST

  Hello,

  i have a save/cancel button which we show when cell editing starts. In order to disable the save button when a user enters an invalid value in the cell, we need to know when an validation error occurs in the flexgrid.

  I read that we only can check the complete data object (loop) of a grid for an validation error in a cell.

  But how can we implement a reactive Validation. This means, after every keystroke we want to validate and not after cellEditEnding Event.

  Is that somehow possible or what can we do?

  Thanks and best regards, Asmir

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 24 May 2018, 9:47 am EST

  Hi Asmir,
  
  You may handle keyup event and perform required validation, Please refer to the following demo sample which implements the same:
  
  https://stackblitz.com/edit/angular-qopk7b?file=app%2Fapp.component.ts

  ~Manish

• 

  webworx

  • Post Options:
  • Link
    Copy

  Posted 24 May 2018, 12:17 pm EST

  Hello Manish,

  thank you very much for the example. It’s working great but it’s not Fitting with my current implementation. Maybe my Explanation was weak.

  I have a collectionView and in the getError -Method i am doing a lot of Validation checks for the grid. But this checks are done after leaving the cell or putting Focus to some other element.

  But i would like to know if we can use the already implemented Validation which should be triggered after every keystroke instead after leaving the cell.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 25 May 2018, 7:34 am EST

  Hi,

  You may call getError method whenever required for validation by providing item and column binding.
  
  Please refer to the following updated sample which implements the same:-
  
  https://stackblitz.com/edit/angular-njjcpj?file=app%2Fapp.component.ts

  ~Manish