Angular 8: Nested Reactive Form in sub-component not working

Question

I'm using Angular 8 Nested Reactive Form in a child component, but it does not work. I have searched the official Angular documentation, but I can not find any example on this.

My solution is available at stackblitz.com. I'm unable to show companyName for each company and address details for each address. Any ideas?

According to Kara Ericksons talk about “Angular Forms” at the Angular Connect 2017 it should be straight forward...

Her video Nested Forms in Angular between 35:31-36:51

In parent.component.html

<form [formGroup]="form">

    <div *ngFor="let address of addresses">
        <app-child [address]="address"></app-child>
    </div>

    <button type="submit">Save</button>

</form>

In parent.component.ts

export class ParentComponent implements OnInit {

  form = new FormGroup({});

  addresses : Address[] = [
    new Address("Street 1", "City 1"),
    new Address("Street 2", "City 2"),
    new Address("Street 3", "City 3"),
  ]

  constructor() { }

  ngOnInit() {
  }
}

In child.component.html

<div formGroupName="address">

     <input formControlName="street">
     <input formControlName="city">

</div>

In child.component.ts

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.less']
})
export class ChildComponent implements OnInit {

  @Input() address: Address;
  form: FormGroup;

  constructor(parent: FormGroupDirective) {
    this.form = parent.form;
  }

  ngOnInit() {
    this.form.addControl('address', new FormGroup({
      street: new FormControl()
      city: new FormControl()

    }));
  }
}

bjdose · Accepted Answer · 2020-02-15 22:22:35Z

2

Try passing your formGroup as input instead of using the constructor into the child component.

@Input() formGroup: FormGroup;

instead of

constructor(parent: FormGroupDirective) {
  this.form = parent.form;
}

Edited 02/15/2020

I changed some code and solved your issue. The solution is available here: https://stackblitz.com/edit/angular-vyaj57-kgkdih

edited Feb 15, 2020 at 22:22

answered Feb 14, 2020 at 22:47

bjdose

1,3099 silver badges11 bronze badges

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

3 Comments

CodeAlike Over a year ago

I have have changed the implementation, too your suggestion, but I can't show the companyName in company.component.html. Any ideas? I have updated my question with my solution on stackblitz.

bjdose Over a year ago

I updated my answer and left a stackblitz link with the solution.

rcanpahali Over a year ago

Dear @bjdose, When I add {{ companies | json }} output at the bottom of app.component.html the output is not updating when I start filling the input boxes. Can you please explain me why?

Quake · Accepted Answer · 2020-02-15 01:18:15Z

0

Did you forgot to add parent FormGroup to viewProviders to your child component? Like this:

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.less'],
  viewProviders: [
    {
      provide: ParentComponent,
      useExisting: FormGroupDirective
    }
  ]
})

answered Feb 15, 2020 at 1:18

Quake

2512 silver badges7 bronze badges

2 Comments

CodeAlike Over a year ago

Yes, I did forget to add viewProviders. When is this required? Can you provide a use case? I have updated my question with my solution on stackblitz to follow @Brayan's implementation. Is this the official/recommended way of doing this?

CodeAlike Over a year ago

I still can't show companyName and address details. Any ideas?

Collectives™ on Stack Overflow

Angular 8: Nested Reactive Form in sub-component not working

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related