How to include input fields from a child component in the parent form?

  angular, validation

I have an Angular component with a form which looks like the following:

<form #reportForm="ngForm">
    <inner-component1></inner-component1>
    <inner-component2></inner-component2>
    <inner-component3></inner-component3>
</form>

I declared the form in the corresponding typescript file as such:

@ViewChild('reportForm', {static: false}) reportForm: NgForm;

The inner components consist of a set of different input fields. In the parent component there is a button that, when triggered, runs the following:

if (this.reportForm.valid) { ... }

And I would like to include the validation present in the child components when validating the form from the parent, but it doesn’t seem to work automatically.

In another part of my application I use the same method without child components. So I do something like:

<form #reportForm="ngForm">
    <input type="text" id="lname" name="lname" required>
</form>

And when I trigger reportForm.valid in the corresponding ts file, the validation is taken into account correctly.

How can I pass my NgForm to the inner components so that their validation is taken into account when the parent calls reportForm.valid?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.