Angular 自定义控件 onChange 无法正常工作

Question

我已经构建了一个带有标准和自定义控件的动态表单（一个简单的按钮比例来推送和检索值）。我遵循了Angular教程和其他来确保我以正确的方式构建访问器。

比例分量的值始终正确并且正确更新。如果我单击提交按钮，该值是可以的，但由于某种原因，更改事件不会触发。

我使用工作项目和一些示例数据创建了一个 Stackblitz。 目的是在每次更改时显示表单数据，无论它是文本框、下拉菜单还是自定义比例组件。我还有一个“显示”按钮来手动查看值。

在

dynamic-form.component.html

中，我有一个

(change)="onSubmit()"

事件来显示值。

如您所见，更改文本框或下拉列表将显示值，但按比例按钮不会显示值（但它会正确更新，您可以通过按“显示”按钮看到它）。

有什么想法为什么没有检测到更改事件吗？正如我从阅读文档中了解到的，假设在

item-scale.component.ts

函数

chooseValue(scaleValue: number)

中，

this.onChange(this.scaleValue);

行应该触发更改事件，不是吗？

Answer 1

我们可以监听父组件上的值变化并触发

onSubmit

，使用监听器的方法是很长的路！

此外，通过使用

debounceTime

，我们可以减少触发值更改的次数，从而使代码具有更好的性能！

您尚未定义要触发的事件的更改

@output

，这是您代码中的问题！

  ...
  ngOnInit() {
    const group: any = {};

    this.items.forEach((elem) => {
      group[elem.id] = new FormControl(elem.value || '');
    });

    this.form = new FormGroup(group);

    this.form.valueChanges.pipe(debounceTime(500)).subscribe(() => {
      this.onSubmit();
    });
  }
  ...

stackblitz 演示