Angular 5表单重复输入值

rel1x

我有一个简单的表格:

this.searchForm = this.formBuilder.group({
  query: [ null, [Validators.required] ]
});

当用户将某些内容粘贴到输入中时,我使用正则表达式重新格式化值并更新表单。

onPaste(event) {
    const formattedQuery = event.clipboardData.getData('text/plain')
      .split(/,?[\r\n\t]+\s?/)
      .join(', ')
      .replace(/,\s?$/g, '');

    this.searchForm.get('query').setValue(formattedQuery);
    // this.ref.detectChanges();
  }

但是当我粘贴一些东西时

325435956
325435956

它复制了它,因此我看到了,325435956, 325435956 325435956 325435956但我希望看到325435956, 325435956我的错误在哪里以及如何解决?

您可以在这里找到工作示例https://stackblitz.com/edit/angular-cp9yhx?file=app%2Fhello.component.ts

nipuna777

即使您处理粘贴功能,默认行为也保持不变。

因此,它首先处理该方法并打印出期望值。然后按原样粘贴值。

您应该防止默认行为。

onPaste(event) {
    event.preventDefault();

    //rest of the method as it is right now
}

固定示例:https : //stackblitz.com/edit/angular-7orqb9?file= app/ hello.component.ts

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular 5 - 表单输入 - 单击建议值时触发事件

基于表单输入的Angular 5 ngModel设置默认值

Angular 2 - 更改嵌套表单输入值

Angular 5在模板驱动的表单输入上设置默认值

Angular 2输入指令修改表单控制值

如何获取表单输入,使用Angular绑定选择值?

在Angular Dart中验证表单输入值的长度

Material Design Lite * ngIf在表单输入字段Angular 5上

Angular 6-多层嵌套的反应式表单重复输入

如何获取表单输入值以使用Angular.js替换提交表单

Angular Attribute Directive表单输入

Angular2反应性表单-设置表单输入字段的默认值(输入类型=文件)吗?

Angular 5 - 具有不同值的输入视图

Angular Forms:在自动完成选择时,定义与输入值不同的表单控件值

Angular11 响应式更改表单验证以检查重复值

angular 5 将值设置为嵌套表单组表单数组

清除Angular中的表单值

动态表单生成 Angular 5

Angular 2表单验证重复密码

Angular:如何在控制器中获取表单的输入值?

比较 2 个输入字段的值以通过模板验证 Angular 7 中的表单

Angular 2使用getter和setter将输入表单值与模型绑定

Angular 4表单数组removeAt()上的输入中的值不正确

动态关闭选项卡时,angular6表单输入值不正确

Angular 6物料表添加了具有最后输入值的行(表单字段)

我在 Angular 表单中的输入没有显示它的默认值

Angular 反应式表单,输入错误:没有名称的表单控件的值访问器

如何触发反应式表单值仅在输入模糊时更改订阅并在Angular 2中输入键

导出输入值 Angular 6