valueChanges of FormArray control not triggering

Raj picture Raj · Mar 28, 2018 · Viewed 8.6k times · Source

I am trying to capture the valueChanges event of FormArray control in angular 5 reactive form. I have normal form group valueChanges events and same work fine but doesn't work with formArray controls.

I have defined my form group as -

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

and initializing form array as follows -

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

When I am getting data from my api, I am setting the control as -

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

my html template is as follows -

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

and then in ngOnInit, I am trying to capture the valueChanges event -

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

But it never get triggered. I also have tried to put the valueChanges code snippet in my formArray initialization but no luck,

Answer