ValueChange is not called

Question

My problem is that valueChanges is called only for whole form not for specific contoroler. This works, but returns the whole object

    public ngOnInit(): void {
          this.form.createWagonBodyForm();

            this.goodCode$ = this.form.wagonBodyForm.valueChanges.subscribe((val) => {
            console.log(val);
        })
}

valueChanges is not firing when I try to check if my goodCode value has changed.

public ngOnInit(): void {
  this.form.createWagonBodyForm();

const goodCode = this.form.wagonBodyForm.get('goodCode');
this.goodCode$ = goodCode.valueChanges.subscribe((val) => {
        console.log(val);
    })

}

Here is my code. It has a lot formControlNames, but I just posted the two which I want to know if changes.

<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(''),
                })
            );
        }
    }
}

Answer 1

By you implement Dynamic form, you need to specific the index of goodCode that you want to look at

createForm(item?: any): void {
    const formGroup = this.fb.group({
      vagonNumber: new FormControl((item) ? item.vagonNumber : ''),
      goodCode: new FormControl((item) ? item.goodsGng : ''),
    });

    const index = this.wagonBodyForm.length;
    this.wagonSubSubscription = formGroup.valueChanges.subscribe(value => {
      console.log('I receive value change at No ' + (index + 1) + ' with value: ' + JSON.stringify(value));
    });

    this.wagonBodyForm.push(formGroup);
}

Extra more

You can basically optimize your code to be like this.

public createForm(item?: ISmgsWaggon) {
    this.wagonBodyForm.push(
        this.fb.group({
            vagonNumber: new FormControl((item) ? item.vagonNumber : ''),
            goodCode: new FormControl((item) ? item.goodsGng : ''),
        })
    );
}

Full example in Stackblitz: stackblitz