Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
evan susanto
250
IGGRID Custom validation dialog Angular 4
posted

Hi,

I need help to add custom validation to the account textbox inside dialog editor to see if the account exist in the database through API. I tried below code but i can't seem to get it to work.

{
  columnKey: "customerAcctNo",
  editorType: 'text',
  required: true,
  editorOptions: {
    validatorOptions: {
      custom: {
        method: function (value, fieldOps) {
          me._sharedService.validateAccount(value)
          .subscribe(data => {
           if (data) {return true;}
           else {return false;}})
        },
        errorMessage: "Account doesn't exist"
      }
    },
    width: "100%"
  }
},

SERVICE:

public validateAccount(account: string): Observable<IUser[]> {
let params: URLSearchParams = new URLSearchParams();
if (account) { params.set('customerAcctNo', account); }

let requestOptions = new RequestOptions();
requestOptions.withCredentials = true;
requestOptions.search = params;

return this._http.get(this._accountUrl, requestOptions)
.map((response: Response) => { if (response) { return true; } else { return false } })
.do(data => console.log('account: ' + JSON.stringify(data)))
.catch(this.handleError);
}

Parents
No Data
Reply
  • 29417
    Offline posted

    Hello evan, 

    Your validate account method is asynchronous while the custom.method function is not.This would not work since the response from the server will be executed after the custom.method has already been executed and resolved. 

    I suggest that you add a separate validator on the page, add the field from the dialog you want to additionally validate, for example:

            features:[

                {

                    name: "Updating",

                     editMode: "dialog",

                     rowEditDialogAfterOpen: function(e, ui){

                       jQuery("#customValidator").igValidator("addField",{ selector: jQuery("input[data-editor-for-{columnKey}]")});

                     }

                } 

            ]

    Where {columnKey} is the key of the column which this editor should edit. 

    And in the callback from your remote service call you can force validation manually and check the result from the remote request inside the custom function, for example:

        this.validationResult = false;

        jQuery("#customValidator").igValidator("validate");

     …

           this.validatorOpts = {

                                                                                    fields:[],

                                                                                    errorMessage : "Custom error",

                                                                        custom: function (evt, ui) {

                                                                                                    return self. validationResult;

                                                                                    }

                                                    } 

    Let me know if that solves your issue.

     

    Best Regards,

    Maya Kirova

    Infragistics, Inc.

    http://www.infragistics.com/support

     

     

     

Children