Angular 5表单重复输入值

时间:2017-12-08 09:57:16

标签: angular angular-reactive-forms

我有一个简单的表格:

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

1 个答案:

答案 0 :(得分:6)

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

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

您应该阻止默认行为。

onPaste(event) {
    event.preventDefault();

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

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