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.
it's seems to work but it validate only when i tab out the textbox. my validation api takes half a second to return value so it won't validate if i tab out faster than the api return.
I also need to add error message in the column settings below if not it display "This field needs attention"
columnKey: "customerAcctNo", editorType: "text", required: true, editorOptions: { validatorOptions: { custom: function () { return me.validationRes; }, errorMessage: "User doesn't exist" },
It seems that in the rowEditDialogContentsRendered event the editors are not yet available in the DOM so the additional validation that was added is not triggered since the input is not added as a validation field.
So the validation defined in the column settings is triggered instead but the timing is off.
You can remove the validation defined in the column settings and leave in just the custom logic in the valueChanged event that triggers the validation of the separate editor.
columnSettings: [ { columnKey: "id", readOnly: true, editorType: 'text' }, { columnKey: "userId", editorType: 'text', required: true, editorOptions: { valueChanged: function(e, ui){ me._homeService.validateUser(ui.newValue) .subscribe(data => { if (data) { me.validationRes = true; } else { me.validationRes = false; } jQuery("#customValidator").igValidator("validate"); }, error => { me.validationRes = false; jQuery("#customValidator").igValidator("validate"); }); } }
} ]
And to make sure the validation field is added only once when it’s available in the DOM you can use the rowEditDialogAfterOpen and add a check for the fields length:
rowEditDialogAfterOpen: function (e, ui) {
if( $("#customValidator").data("igValidator").options.fields.length === 0 ){
$("#customValidator").igValidator("addField", { selector: $("input[data-editor-for-userId]") });
I’ve attached a sample for you reference.
I still receive below error when I open the dialog and validate the second time.
Error:
ERROR TypeError: Cannot read property '_currentText' of undefined
In my code i use custom dialog below.
TS:
rowEditDialogOptions: { showEditorsForHiddenColumns: true, showReadonlyEditors: false, dialogTemplateSelector: "#dialogtemp" },
HTML: The code attached below
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.
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()
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:
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.