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); }
Hello evan,
I was not able to reproduce this with the previously attached sample.
If you’re able to reproduce this issue with the attached sample please let me know what environment you’re testing it on (OS, browser, browser version).
If you’re reproducing it in your own application then please feel free to modify the isolated sample so that it more closely resembles your scenario and send it back.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://es.infragistics.com/support
The validation doesn't work when i open the dialog the first time but it will work the second time onward.
It seems that angular excludes script tags when defined in the template.
You can either define the template in the main html page or set the value as string for the dialogTemplate option.
Additionally it seems that when a dialog template is used the dialog is destroyed and re-created when opened, which may cause issue with the additional validator.
You can force it to do the same, for example:
rowEditDialogAfterOpen: function (e, ui) {
me.validatorOpts.fields = [{ selector: $("input[data-editor-for-userId]") }];
$("#customValidator").igValidator(me.validatorOpts);
},
rowEditDialogBeforeClose: function (e, ui) {
$("#customValidator").igValidator("destroy");
}
I’ve attached another sample for your reference.
Test it on your side and let me know if you encounter any issues with it.
It's working because it doesn't use the custom template. You can tell by changing the template around
It probably doesn't like dialogTemplate: $("#dialogtemp").html()
In that case the problem would be that the dialog already exists in the DOM and you’ll have multiple elements with attribute data-editor-for-userId, which will match the selector used by the custom validator.
You can wrap the template in a script tag so that it won’t be rendered:
<script id="dialogtemp" type="text/html">
< Your Template>
</script>
And set it to as dialog:
dialogTemplate: $("#dialogtemp").html()
I’ve attached a sample for your reference.
Let me know if you have any questions or concerns.