Passing parent form controls from an Angular 4 FormGroup to a child component

Question

Passing parent form controls from an Angular 4 FormGroup to a child component

I have implemented Angular Reactive Forms FormGroup and FormArray in my project. The issue I am facing is related to splitting my form fields into child components and passing the parent form controls to them. I expected this to be a straightforward process, but I am encountering difficulties. My main FormGroup is named 'binsForm', and in my template, I am including the child component like this:

<app-child [parent]="binsForm"></app-child>

Within the child component, I have defined an @Input property:

@Input() parent: FormGroup;

Subsequently, I am referencing this input in the child template:

<div class="fields-wrap" [formGroup]="parent">
   <div class="input-wrap">
      <label>Bin ID <span>*</span><input type="text" formControlName="id"></label>
   </div>
  <div class="clearfix"></div>
</div>

Upon examining the StackBlitz provided, you will notice that upon clicking 'edit quality', the console displays the message 'Cannot find control with the name id.'

Despite following a tutorial on this approach, I am unable to pinpoint the reason why the child component cannot locate the form group.

javascript angular typescript angular-components angular-reactive-forms

Answer 1

Answer №1

After reviewing your code, I noticed that app-child is expecting its own form but you are attempting to inject the parent form, which lacks the necessary child attributes such as id, type, subtype, etc.

Instead of injecting the parent form, you should inject the child form that is obtained from your FormArray (binsFormArray), like this:

<app-child [parent]="binsFormArray.at(i)"></app-child>

Answer 2

After reviewing your code, I noticed that app-child is expecting its own form but you are attempting to inject the parent form, which lacks the necessary child attributes such as id, type, subtype, etc.

Instead of injecting the parent form, you should inject the child form that is obtained from your FormArray (binsFormArray), like this:

<app-child [parent]="binsFormArray.at(i)"></app-child>

Answer 3

Answer №2

To receive the updated Parent form in your child component, you should utilize the OnChanges lifecycle hook.

First, make sure to import OnChanges from Angular.

Next, implement it in your ChildComponent class like this:

export class ChildComponent implements OnInit, OnChanges {
    ngOnChanges(changes) {
        console.log('changes', changes);
        this.parent = changes.parent;
    }
}

Answer 4

To receive the updated Parent form in your child component, you should utilize the OnChanges lifecycle hook.

First, make sure to import OnChanges from Angular.

Next, implement it in your ChildComponent class like this:

export class ChildComponent implements OnInit, OnChanges {
    ngOnChanges(changes) {
        console.log('changes', changes);
        this.parent = changes.parent;
    }
}

Passing parent form controls from an Angular 4 FormGroup to a child component

Answer №1

Answer №2

Similar questions

Stop Stripe checkout if all other fields are left empty

JavaScript appendChild method not functioning properly with dynamically created image elements in JavaScript code

Save JSON data from Javascript to a file on the server without using a server-side application

Video background mute feature malfunctioning

Error: ChunkLoadError encountered when trying to load the "blogs-component" chunk in Laravel Vuejs

Strategies for retrieving the latest content from a CMS while utilizing getStaticProps

Different ways to split up information on the client side into separate "pages"

Displaying the contents of a local HTML file in a div

How can server convert the data from Websocket 8.5, which sends `<Buffer>`, into JSON format?

Converting string to JSON format by splitting it based on names

Enhancing Efficiency: Streamlining Editing in KendoUI Grid for Angular 2/4

Quick and easy way to access json data with jquery

Prioritize moving the JavaScript onload handler to the end of the queue

Encountering the issue of receiving "undefined" in node.js after submitting data from an Angular form

Unleashing the power of joint queries in Sequelize

Testing Angular Components: Accessing HTML Elements by Data-QA Tag Attribute

Is it possible to configure Nginx mime types within a Docker container?

The correct way to properly define an eventEmitter in JavaScript

Error TS2339: The 'email' property is not found in the 'FindUserProps' type

Harnessing the power of lazysizes with WebP