Query: The issue is that valueChanges is only triggered for the entire form and not for specific controllers. Although this approach works, it returns the complete object.
public ngOnInit(): void {
this.form.createWagonBodyForm();
this.goodCode$ = this.form.wagonBodyForm.valueChanges.subscribe((val) => {
console.log(val);
})
}
The problem arises when attempting to detect changes in the goodCode value through valueChanges.
public ngOnInit(): void {
this.form.createWagonBodyForm();
const goodCode = this.form.wagonBodyForm.get('goodCode');
this.goodCode$ = goodCode.valueChanges.subscribe((val) => {
console.log(val);
})
}
This portion of my code contains several formControlNames, but I have provided only two for which I need change detection:
<div class="row m-0 table-responsive panel wagon-form-body" [formGroup]="form.wagonBodyForm">
<table class="table gr table-bordered">
<thead class="panel-head">
<tr>
<th width="5%" style="min-width: 100px">{{ 'navigation.WagonN' | translate }}</th>
<th width="5%"> {{ 'navigation.Cargocode' | translate }} </th>
</tr>
</thead>
<tbody class="panel-body">
<tr *ngFor="let waggon of form.wagonBodyForm.controls; index as i" [formGroup]="waggon">
<td>
<input type="text" class="form-control gr-input validate" minlength="8" maxlength="8" required
OnlyNumbers formControlName="vagonNumber" />
</td>
<td>
<input type="text" class="form-control gr-input validate" required minlength="7" maxlength="8"
OnlyNumbers formControlName="goodCode" />
</td>
</tr>
</tbody>
</table>
export class FormService {
public wagonBodyForm!: FormArray;
public createForm(item?: ISmgsWaggon) {
if (item) {
this.wagonBodyForm.push(
this.fb.group({
vagonNumber: new FormControl(item.vagonNumber),
goodCode: new FormControl(item.goodsGng),
})
);
}
else {
this.wagonBodyForm.push(
this.fb.group({
vagonNumber: new FormControl(''),
goodCode: new FormControl(''),
})
);
}
}
}