Angular Formly, detect keycode in onKeypress - angular-formly

Question

I have an Angular Formly-based form in my Angular-SPA. In one of the fields the user can enter data with the help of a physical barcode-scanner. The scanner enters the numbers from the barcode followed by 'enter' (keycode: 13).
When the 'enter' is entered, the form should preform an action (not a form submit-action, but an internal search to make sure the entered number doesn't already exists in the system), then the user can proceed to fill out the form.
In vanilla javascript, its possible to do this by a simple onKeypress-event:
function checkInput(event) {
if (event.keyCode == 13) {
console.log("Preforming search");
}
}
<input type="text" onKeypress="checkInput(event)">
In Formly however, it's possible to add a property 'onKeypress', but it doesn't seem to pass the same event as vanilla javascript. This is some of my Angular Formly code:
templateOptions : {
placeholder: "ISBN",
onKeypress: function(model, options, _this, event) {
console.log(model);
console.log(options);
console.log(_this);
console.log(event);
}
}
When I run this code, the event-object is 'undefined', instead of being the same event as in vanilla javascript.
Is there any way to access the actual event in the onKeypress-property of Angular Formly-forms?
Cheers!

Answer 1

Update
Found a solution! I was trying to do this to a custom type, which is then inherited to the actual input-element.
Seems like Formly doesn't allow inheritance of the onKeypress-property. I moved the onKeypress-property to the actual element, and I was able to solve the problem.
It's a bit unfortunate that this can not be inherited, but have to be defined for each element instead.
My problem (simplified) :
formlyConfig.setType({
name: 'multiInput',
templateUrl: 'app/editor/multiInput.html',
defaultOptions: {
wrapper: ['bootstrapLabel', 'boostrapHasError'],
templateOptions: {
inputOptions: {
type: 'input',
wrapper: null
},
onKeypress: function(model, options, _this, event) {
// DO SEARCH (NOT WORKING)
}
}
}
}
// --------------------------- //
{
className: 'col-xs-10',
type: "multiInput",
key: "isbns",
templateOptions: {
label: 'ISBN',
inputOptions: {
templateOptions: {
required: true,
disabled: true,
placeholder: 'ISBN'
}
},
key: "isbn",
}
}
}
My solution:
formlyConfig.setType({
name: 'multiInput',
templateUrl: 'app/editor/multiInput.html',
defaultOptions: {
wrapper: ['bootstrapLabel', 'boostrapHasError'],
templateOptions: {
inputOptions: {
type: 'input',
wrapper: null
}
}
}
}
// --------------- //
{
className: 'col-xs-10',
type: "multiInput",
key: "isbns",
templateOptions: {
label: 'ISBN',
inputOptions: {
templateOptions: {
required: true,
disabled: true,
placeholder: 'ISBN',
onKeypress: function(model, options, _this, event) {
// DO SEARCH (WORKING!)
}
}
},
key: "isbn"
}
}
}
It's not the best solution, I want more inputs to have the onKeypress-event. But it looks like I might have to add them separately.