使用 Angular6 不会以 Reactive Form 调用值更改

Question

我正在为下拉菜单使用响应式表单，我希望在我的下拉菜单值发生变化时调用值变化，我是这样实现的

 ngOnInit() {
    this.employeerosterForm = this._formbuilder.group({
      drpDomain: [''],
      drpPlatform: [{ value: this.platformInitialValue, disabled: this.platformControlDisabled }],
      drpApplication: [{ value: this.applicationInitialValue, disabled: this.applicationControlDisabled }],
      drpIndividual: [{ value: this.individualInitialValue, disabled: this.individualControlDisabled }]
    })

 this.employeerosterForm.controls.drpDomain
      .valueChanges
      .subscribe(domain => {
        alert();
      });
  }

但是当我更改下拉列表中的值时，即使我已订阅，也不会调用值更改。怎么了？

我什至尝试在 ngOninit() 上使用它

 this.employeerosterForm.get('drpDomain')
    .valueChanges
      .subscribe(domain => {
        alert();
      });

但它不起作用

编辑 1

HTML

<select class="form-control" formControlname='drpDomain'>
              <option>Select Domain</option>
              <option *ngFor='let d of domain' [value]='d.DOMAINNAME'>{{d.DOMAINNAME}}</option>
            </select>

.ts 文件

ngOnInit() {
    this.initializeControls();
    this.interactionWatchDog();
  }

 interactionWatchDog() {
    this.employeerosterForm.get('drpDomain')
      .valueChanges
      .subscribe(domain => {
        alert();
      });
  }

initializeControls() {
    this.employeerosterForm = this._formbuilder.group({
      drpDomain: [''],
      drpPlatform: [{ value: this.platformInitialValue, disabled: this.platformControlDisabled }],
      drpApplication: [{ value: this.applicationInitialValue, disabled: this.applicationControlDisabled }],
      drpIndividual: [{ value: this.individualInitialValue, disabled: this.individualControlDisabled }]
    })
  }

Answer 1

您可能想要：

this.employeerosterForm.valueChanges

或

this.employeerosterForm.get('controlName').valueChanges

还要确保模板中的表单已正确连接以匹配 class，它可能会以某种方式被孤立。

Answer 2

您的模板中 formControlname 处有一个拼写错误，可能是因为它不起作用：

<select class="form-control" formControlName='drpDomain'>
  <option>Select Domain</option>
  <option *ngFor='let d of domain' [value]='d.DOMAINNAME'> 
    {{d.DOMAINNAME}}
  </option>
</select>

勾选stackblitz

使用 Angular6 不会以 Reactive Form 调用值更改

Value changes is not getting called in Reactive Form using Angular6

angular

angular6

angular-reactive-forms

valuechangelistener