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

模板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

Answer 2

您可能想要：

this.employeerosterForm.valueChanges

或

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

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

使用Angular6无法在Reactive Form中调用值更改

2 个答案: