How to disable Save button in a Reactive Forms based Grid edit Dialog

Question

* When I am using a Reactive Forms Grid in Dialog edit mode, how can I disable the 'Save' button of the dialog whenever the FormGroup is invalid?

Basically the Reactive Forms sample https://ej2.syncfusion.com/angular/documentation/grid/edit/#reactive-forms, but with editSettings.mode equal to 'Dialog', and say a missing 'CustomerID' (which is a required value in the sample).

If the customer id is missing, I want to disable the 'Save' button, if it is present, the 'Save' button should be enabled.

On a related note, I would also like to be able to change the text of the 'Save' button (perhaps to 'Create').

Thanks,

-Earl

Manivel Sellamuthu · Accepted Answer

Hi Earl, 

Greetings from Syncfusion support. 

We have validated your requirement. You can achieve your requirement in the actionComplete event of the Grid by changing the content of the button and subscribing the form changes. Please refer the below code example and sample for more information. 





[App.component.ts] 
 
    actionComplete(args: DialogEditEventArgs): void { 
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 
         //here you can change the button content as per your requirement 
          let btnObj = (args.dialog as any).btnObj[0]; 
          btnObj.content = 'Create'; 
 
       //here you can enable/disable the button based on the form validation 
          btnObj.disabled = !this.orderForm.valid; 
          this.orderForm.statusChanges.subscribe((e)=> { 
           e === 'VALID' ? btnObj.disabled = false : btnObj.disabled = true;  
          }); 
. . . 
    } 

Sample: https://stackblitz.com/edit/angular-160028?file=app.component.ts 

Please let us know, if you need further assistance. 

Regards, 
Manivel

pcafstockf · Answer

Hi Manivel,That does work.  Thank you.  But it generates two follow up questions...* If the user hits the 'Cancel' button, how can I detect that the dialog closed and perform the important step of unsubscribing from this.orderForm.statusChanges.subscribe() ?* Are there any plans to make the btnObj property public (in other words, will this approach break in the future)?Thanks,-Earl

Balaji Sekar · Answer

Hi Earl, 
 
Thanks for your patience. 
 
Query #1: If the user hits the 'Cancel' button, how can I detect that the dialog closed and perform the important step of unsubscribing from this.orderForm.statusChanges.subscribe() ? 

We can unsubscribe the form validation while hit the “Cancel” button using actionBegin with “cancel” requestType. Please refer the below code example and sample for more information. 





[app.component.ts] 
  actionBegin(args: SaveEventArgs): void {     
    if (args.requestType == "cancel") { 
      this.orderForm.statusChanges.unsubscribe(); 
    } 
} 

Sample link: https://stackblitz.com/edit/angular-160028-poigjy  

Query #2: Are there any plans to make the btnObj property public (in other words, will this approach break in the future)? 
 
No, btnObj is instance of Save button it is access after rendered the edit form alone. We have overridden the Save button according your query. 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar