How to validate the child component NgForms having 3 different NgForm from the parent component in Angular4

Question

I have a scenario where I am accessing two different NgForms one within Parent form #parentform and other in the Child component #childForm & #childForm1, and i want to check the validity of the controls of child form wether valid or not in parent component form. How to do this in angular4.

I also followed this link: Check if a form is valid from a parent component using Angular 4

everytime i am getting undefined for the reference of child component form.

My code is something like this.

parent.component.html

    <form class="form-wrapper" (ngSubmit)="parentForm.form.valid && save()" #parentForm="ngForm" novalidate>
        <input id="firstName" type="text" placeholder="" class="validate" name="firstName" [(ngModel)]="firstname_" #firstName="ngModel"                         required>
    </form>
    <child-component></child-component>

child.component.html

  <form class="form-wrapper" (ngSubmit)="childForm.form.valid && save()" #childForm="ngForm" novalidate>
            <input id="phoneNumber" type="text" placeholder="" class="validate" name="phoneNumber" [(ngModel)]="phone_" #phoneNumber="ngModel"                       required>
 </form>

 <form class="form-wrapper" (ngSubmit)="childForm1.form.valid && save()" #childForm1="ngForm" novalidate>
            <input id="mobileNumber" type="text" placeholder="" class="validate" name="mobileNumber" [(ngModel)]="mobile_" #mobileNumber="ngModel" required>
 </form>

Now i want to validate the child component form "childForm" & "childForm1" valid or not in parent form.

Same is reproduced at https://stackblitz.com/edit/angular-cjorjz...

What you can try is something with the **@Input** of the child something like `` . And in the child catch it with `ngOnChanges(changes: any) {` — Swoox, Nov 29 '17 at 13:34
Tested it and put my answer. The stackblitz couldn't be edited and saved... — Swoox, Nov 29 '17 at 14:34

score 3 · Accepted Answer · edited Jan 06 '20 at 21:12

3

So what you want, is to pass the parentForm.form.status to the child with an @Input().

In parent html:

<child-component [parent]="parentForm.form.status"></child-component>

Then in your child:

@Input() parent: any;
private boolean: boolean = false;

ngOnChanges(changes: any) {
  if(changes.dataSet.currentValue === 'VALID'){
    this.boolean = true;
  }
  else { this.boolean = false; }
}

And to check it console.log(this.boolean) it or put {{boolean}} in html. Or childForm.form.valid && save() && boolean in html.

EDIT

To send the validation back:

In the child component you have to tigger the @Output() so use a change event on the html:

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

private checkValid(_childForm: string){
  if(_childForm === 'VALID'){
    this.valid.emit(true);
  }
  else { this.valid.emit(false);
}

In html to all your child formsfield:

(ngModelChange)="checkValid(childForm.form.status)"

In your parent html:

<child-component [parent]="parentForm.form.status" (valid)="setValidChild($event)"></child-component>

In the parent component:

private childBoolean: boolean= false;

private setValidChild(_boolean: boolean){
  this.childBoolean = _boolean;
}

edited Jan 06 '20 at 21:12

GSerjo

4,725
1
36
55

answered Nov 29 '17 at 14:32

Swoox

3,707
2
21
32

Great Solution it works... but what i want is vice a versa of the solution you posted. I want to validate the child form in the Parent component... that too multiple child forms... – mpunit30 Nov 30 '17 at 05:03
But found one issue.. When i am refreshing the page i am not getting the reference to child component showing blank .... – mpunit30 Nov 30 '17 at 08:05
Cause a refresh will empty everything then you have to add `localStorage`. But that's a whole different question ;) – Swoox Nov 30 '17 at 08:11
So how to handle now ?? – mpunit30 Nov 30 '17 at 09:10
Make a new stackoverflow question and post your question ;) – Swoox Nov 30 '17 at 09:21
Thanks for help @Swoox. I am able to handle that. Thank you – mpunit30 Nov 30 '17 at 11:06

How to validate the child component NgForms having 3 different NgForm from the parent component in Angular4

1 Answers1

Linked