How to update a nested FormGroup passed as input to a child component in Angular?

Question

I have trouble passing the nested FormGroup (the one that is a FormControl of an outer FormGroup) as an input to a child component. More precisely, the changes made to the form group are reflected in it (I can log the expected changed form group both from parent and child; valueChanges subscription works as well), but change detection never fires.

Here is the minimal reproduction:

parent.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  template: '<app-child [inputGroup]="nestedGroup"></app-child>',
})
export class AppComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  get nestedGroup() {
    return this.form.get('nested') as FormGroup;
  }

  ngOnInit(): void {
    this.form = this.fb.group({
      flag: [true],
    });

    this.form.setControl(
      'nested',
      this.fb.group({ field1: { key: 'testString' } })
    );

    this.form.valueChanges.subscribe((form) =>
      console.log('Form updated in parent!', form)
    );

    setTimeout(() => this.changeValue(this.nestedGroup), 5000);
  }

  changeValue(nestedForm: FormGroup) {
    console.log('Should log CHILD FORM changes now:');
    nestedForm.controls['field1'].patchValue({ key: 'newTestString' });
  }
}

child.component.ts

import { ChangeDetectorRef, Input, OnChanges } from '@angular/core';
import { SimpleChanges } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-child',
  template: '<p>child showing up!</p>',
})
export class ChildComponent implements OnChanges, OnInit {
  @Input()
  inputGroup: FormGroup;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges) {
    console.log('Form updated in child!', changes); // TOFIX: should run after 5 sec
  }

  // the code below is only to illustrate that the changes are there
  ngOnInit() {
    this.inputGroup.valueChanges.subscribe((value) => {
      console.log('Got valueChanges in child...', value);
      this.cdr.detectChanges();
    });
  }
}

There is also a small stackblitz I made.

I tried explicitly marking form group as dirty (formGroup.markForDirty()) and firing change detection manually on both levels (cdr.markForCheck(), cdr.detectChanges()).

I expected ngOnChanges to react to a new input. Potentially I would like to manipulate and react to the input FormGroup values in the child.

The result was an active input valueChanges subscription, but not an input change.

slim · Accepted Answer · 2023-07-14 16:10:28Z

0

ngOnChanges will only be called if the object instance of your inputGroup changes. If just a value inside the object changes, it is not enough.

But as you noticed, you do get the changes, and subscribing to valueChanges is exactly the way to go.

For the terminology: Change detection is actually done on your component. If you print the form control value in your template, you should see that it updates after the patchValue call. That means, Angular detected the change and updated the view. But change detection does not mean that ngOnChanges gets called.

answered Jul 14, 2023 at 16:10

slim

5234 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to update a nested FormGroup passed as input to a child component in Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related