7

我正在尝试以 Angular 5 反应形式捕获 FormArray 控件的 valueChanges 事件。我有正常的表单组 valueChanges 事件并且工作正常，但不适用于 formArray 控件。

我已将我的表单组定义为 -

this.ApplicationForm = this.fb.group({
  ApplicationPenalties: this.fb.array([this.preparePenaltyDetails()])
});

并按如下方式初始化表单数组 -

preparePenaltyDetails(): FormGroup {
    return this.fb.group({
      Id: '',
      ApplicationId: '',
      RevisionNo: '',
      PenaltyMwh: ''
    });
  }

当我从我的 api 获取数据时，我将控件设置为 -

this.ApplicationForm.setControl('ApplicationPenalties', this.fb.array(this.application.ApplicationPenalties
              .map(x => this.fb.group(x)) || []));

我的html模板如下 -

<div formArrayName="ApplicationPenalties" *ngFor="let penalty of ApplicationPenalties.controls; let i=index">
                    <div [formGroupName]="i">
                      <div class="row pocCharges">
                        <div class="col-md-6">
                          <div class="form-group">
                            <h4 class="d-sm-block">Revision Number</h4>
                            <div class="input-group">
                              <input class="form-control form-control-sm" formControlName="RevisionNo" type="text">
                              <span class="input-group-addon">
                                <i class="material-icons">account_box</i>
                              </span>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
                            <h4 class="d-sm-block">Penalty(MWh)</h4>
                            <div class="input-group">
                              <input class="form-control form-control-sm" formControlName="PenaltyMwh" type="number">
                              <span class="input-group-addon">
                                <i class="fa fa-bolt fa-2x"></i>
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

然后在 ngOnInit 中，我试图捕获 valueChanges 事件 -

(<FormArray>this.ApplicationForm.get('ApplicationPenalties')).controls.forEach(
      control => {
        control.get('PenaltyMwh').valueChanges
        .debounceTime(100)
        .distinctUntilChanged()
        .subscribe(value => console.log(value));
      }
    );

但它永远不会被触发。我也尝试将 valueChanges 代码片段放在我的 formArray 初始化中，但没有运气，

4

0 回答 0