Angular 2 : Validate child component form fields from the parent component

Question

Problem statement :

Parent component having <form> tag and some <input> tags inside it, and child component also have some <input> tags, parent component has one <submit> and we are validating form fields on submit the form.

How to validate the child component <input> fields from parent component on submit the form ?

Requirement :

If a parent component has a form containing child components with input components in their template, then these input components should be validate on click if submit from the parent component.

Findings :

There are lot of posts in SO having same problem statement but did not find any suitable solution.All the below posts validate the whole form but my requirement is to validate each field in child component.

Use model driven form. Because it will check model values not form names of input. — mukund patel
– mukund patel, Commented Dec 26, 2017 at 17:14
I had a very similar requirement, but quite more complex because I had to validate a hierarchy forms, children, nested components and so on. It is very easy to validate using Reactive forms approach angular.io/guide/reactive-forms — Daniel C.
– Daniel C., Commented Dec 26, 2017 at 17:27
Are you facing problem with plugins, like auto-complete or datepiker? — mukund patel
– mukund patel, Commented Dec 26, 2017 at 17:39
stackoverflow.com/a/47695731/4834833 read this. Here a piece of code which added after a given parent element. I hope something help you. — mukund patel
– mukund patel, Commented Dec 26, 2017 at 17:44
Can you post a sample application so we can have more context? — Immanuel Rosal
– Immanuel Rosal, Commented Dec 28, 2017 at 10:57

Rohìt Jíndal · Accepted Answer · 2018-01-06 18:26:32Z

16

We can achieve it using template driven technique as well. Find below the steps :

From parent component to child component we have to pass submit button event.
```
<button type="button" (click)="enterForm(parentForm)">Submit</button>
```
Here, parentForm is the form reference.
call child component method using @ViewChild decorator from parent to pass submit button event on click of submit.
```
@ViewChild('validateChildComponentForm') private ChildComponent: ChildComponent;
```

Pass the reference of child form using @ViewChild decorator into the child component.

@ViewChild('smartyStreetForm') form;

enterForm(parentForm) {
    this.submitted = true;
    this.ChildComponent.validateChildForm(this.submitted);
    if(!parentForm.valid || !this.childFormValidCheck) {
        return;
    } else {
       // success code comes here.
    }                
}

Now in child component method we will check that if parent form is submitted and child component form is valid then emit true otherwise false into the parent component. we will use @Output decorator to emit the isChildFormValid value into the parent component.

@Output() isChildFormValid: EventEmitter<any> = new EventEmitter<any>();

public validateChildForm(data: any) {
    if (data === true) {
        if(this.form.valid === true) {
            this.isChildFormValid.emit(true);
        } else {
            this.isChildFormValid.emit(false);
        }
    }
}

Now in parent component we will get the isChildFormValid value.

private isChildFormValid(formValid: any) {
    this.childFormValidCheck = formValid;
}

Pictorial representation :

answered Jan 6, 2018 at 18:26

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

5 Comments

MaxwellLynn Over a year ago

A lot of code to achieve this. feels like this should be more simple.

Rohìt Jíndal Over a year ago

Can you please provide your more simple solution as an answer in this post.

MaxwellLynn Over a year ago

Well I actually didn't have one... I was just saying it should be more simple. Although I am currently reading through this article that looks rather promising.

MaxwellLynn Over a year ago

blog.thoughtram.io/angular/2016/07/27/…

GlacialMan Over a year ago

but where are error messages at the bottom of the fields?

Collectives™ on Stack Overflow

Angular 2 : Validate child component form fields from the parent component

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related