Угловая Форма, обнаружение кода ключа в onKeypress

Question

У меня есть угловая формальная форма в моем Angular-SPA. В одном из полей пользователь может вводить данные с помощью физического сканера штрих-кода. Сканер вводит числа из штрих-кода, за которым следует 'enter' (keycode: 13).

Когда вводится «ввод», форма должна преформировать действие (не средство отправки формы, а внутренний поиск, чтобы убедиться, что введенный номер еще не существует в системе), тогда пользователь может приступить к заполнению формы.

В ванильным JavaScript, его можно сделать это с помощью простого OnKeyPress-события:

function checkInput(event) { 
 
    if (event.keyCode == 13) { 
 
    console.log("Preforming search"); 
 
    } 
 
}

<input type="text" onKeypress="checkInput(event)">

В мерно однако, можно добавить свойство 'OnKeyPress', но это Безразлично Кажется, что прошло то же событие, что и ванильный javascript. Это некоторые из моей угловой коды мерно:

templateOptions : { 
 
    placeholder: "ISBN", 
 
    onKeypress: function(model, options, _this, event) { 
 
    console.log(model); 
 
    console.log(options); 
 
    console.log(_this); 
 
    console.log(event); 
 
    } 
 
}

Когда я запускаю этот код, событие-объект «не определен», вместо того, чтобы быть таким же событием, как в ванили JavaScript.

Есть ли способ получить доступ к реальному событию в onKeypress-свойство угловых форм?

Cheers!

Answer 1

Update

Найдено решение! Я пытался сделать это с помощью настраиваемого типа, который затем наследуется к фактическому элементу ввода.

Похоже, что формально не позволяет наследовать свойство onKeypress. Я переместил свойство onKeypress в фактический элемент, и я смог решить проблему.

Немного досадно, что это не может быть унаследовано, но должно быть определено для каждого элемента.

Моя проблема (упрощенно):

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", 
 
    } 
 
    } 
 
}

Мое решение:

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" 
 
    } 
 
    } 
 
}

Это не самое лучшее решение, я хотите больше входных данных для события onKeypress. Но похоже, что мне придется добавлять их отдельно.