html - 下拉菜单上的 onChange 不适用于表单控件

问题描述

我的下拉菜单有问题。我里面有几个值，喜欢使用选定的值。这是我的代码，目前不工作。FormControll总是空的：

app.component.html

  <custom-dropdown [formControl]="majorAreaCtrl" (onChange)="onChange()" [label]="'EXPERTS.MAJOR_AREAS'|translate">
    <custom-dropdown-item *ngFor="let area of areas" [value]="area.key">
      {{ area }}
    </custom-dropdown-item>
  </custom-dropdown>

app.component.ts

export class ExpertsComponent implements OnInit {

  readonly majorAreas = MajorArea
  readonly areas = Object.values(this.majorAreas)
  readonly majorAreaCtrl = new FormControl()

  ngOnInit(): void {
    console.log(this.majorAreas, this.allExperts)
  }

  onChange() {
    console.log(this.majorAreaCtrl.value)
  }
}

有人看到我的错误吗？先感谢您！！

标签： htmlangulartypescriptangular10

您实际上不需要onChange侦听器（[formControl]绑定处理）。但是，这要求您的custom-dropdown组件实现该ControlValueAccessor接口。

如果是这种情况，您应该能够通过订阅this.majorAreaCtrl.valueChangesObservable 来响应更改（例如）。这是一个小例子，尽管没有您的自定义组件。

如果您的组件没有实现ControlValueAccessor，我（以及这里的许多其他人）很乐意帮助您实现它。

html - 下拉菜单上的 onChange 不适用于表单控件

问题描述

解决方案

推荐阅读