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,
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://es.infragistics.com/support
I am not sure where to put the second part of the code. Can you show me a simple sample?
I also attached my sample code below.
You can call your service for example on valueChanged event of the editor, and in the callback ( inside the subscribe method) you can set a global value for the validation result depending on the result from the service.
valueChanged: function(e, ui) {
me._homeService.validateUser(ui.newValue)
.subscribe(data => {
if (data) {
me.validationRes = true;
} else {
me.validationRes = false;
}, error => {
});
That value can then be used in the custom validation method:
method: function (value, fieldOps) {
return me.validationRes;
I’ve attached a sample for your reference.
Let me know if you have any questions.
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.
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()
Let me know if you have any questions or concerns.