Raj*_*Raj 5 angular angular-reactive-forms angular-forms formarray angular5
我正在尝试以 angular 5 反应形式捕获 FormArray 控件的 valueChanges 事件。我有正常的表单组 valueChanges 事件和相同的工作正常但不适用于 formArray 控件。
我已将我的表单组定义为 -
this.ApplicationForm = this.fb.group({
ApplicationPenalties: this.fb.array([this.preparePenaltyDetails()])
});
Run Code Online (Sandbox Code Playgroud)
并初始化表单数组如下 -
preparePenaltyDetails(): FormGroup {
return this.fb.group({
Id: '',
ApplicationId: '',
RevisionNo: '',
PenaltyMwh: ''
});
}
Run Code Online (Sandbox Code Playgroud)
当我从我的 api 获取数据时,我将控件设置为 -
this.ApplicationForm.setControl('ApplicationPenalties', this.fb.array(this.application.ApplicationPenalties
.map(x => this.fb.group(x)) || []));
Run Code Online (Sandbox Code Playgroud)
我的 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>
Run Code Online (Sandbox Code Playgroud)
然后在 ngOnInit 中,我试图捕获 valueChanges 事件 -
(<FormArray>this.ApplicationForm.get('ApplicationPenalties')).controls.forEach(
control => {
control.get('PenaltyMwh').valueChanges
.debounceTime(100)
.distinctUntilChanged()
.subscribe(value => console.log(value));
}
);
Run Code Online (Sandbox Code Playgroud)
但它永远不会被触发。我也尝试将 valueChanges 代码片段放在我的 formArray 初始化中,但没有运气,
| 归档时间: |
|
| 查看次数: |
9188 次 |
| 最近记录: |