Question

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

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

在vanilla javascript中，可以通过简单的onKeypress事件来实现：

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

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

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

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

当我运行此代码时，event-object是'undefined'，而不是与vanilla javascript中的事件相同。

有没有办法在Angular Formly-forms的onKeypress属性中访问实际事件？

干杯！

Answer 1

<强>更新

找到解决方案！我试图对自定义类型执行此操作，然后将其继承到实际的input-element。

似乎Formly不允许继承onKeypress属性。我将onKeypress属性移动到实际元素，我能够解决问题。

有点不幸的是，这不能被继承，而是必须为每个元素定义。

我的问题（简化）：

＆＃13;

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

＆＃13;

我的解决方案：

＆＃13;

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

＆＃13;

这不是最好的解决方案，我想要更多输入来获得onKeypress事件。但看起来我可能需要单独添加它们。

Angular Formly，检测onKeypress中的keycode

1 个答案: