Angular形式上，在onKeypress中检测键码

Question

我的 Angular-SPA 中有一个 Angular 基于表单的表单。在其中一个字段中，用户可以在物理条形码扫描仪的帮助下输入数据。扫描仪输入条形码中的数字，然后输入 'enter'（键码：13）。

当输入 'enter' 时，表单应该执行一个操作（不是表单提交操作，而是内部搜索以确保系统中不存在输入的数字），然后用户可以继续填写表格。

在 vanilla javascript 中，可以通过简单的 onKeypress 事件来做到这一点：

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

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

然而，在 Formly 中，可以添加属性 'onKeypress'，但它似乎不会传递与香草 javascript 相同的事件。这是我的一些 Angular Formly 代码：

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

当我运行这段代码时，事件对象是 'undefined'，而不是原版 javascript.

中的同一事件

有什么方法可以访问 Angular Formly-forms 的 onKeypress-属性中的实际事件？

干杯！

Answer 1

更新

找到解决办法了！我试图对自定义类型执行此操作，然后将其继承到实际的输入元素。

Formly 似乎不允许继承 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 事件。但看起来我可能必须单独添加它们。

Angular形式上，在onKeypress中检测键码

Angular Formly, detect keycode in onKeypress

angular-formly