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,