Angular 2+ validation in child component

Question

I don't have expert knowledge in Angular and I would need some help. I want to validate a form which is placed in component called "viewForm". The form is generated by a loop of a object array called "points". At the end of the "viewForm" I include another component called "footer" which has 4 buttons that in turn calls different services to update values etc.

Now I want to add some validation to the inputs in the form(required) but the issue is that my buttons aren't in the same component as the form. How could that be solved? I've seen examples on how to do this with submit buttons or where buttons are in the same component but in my case it's different. I guess I need to add validation to the form and then pass it on to the "footer" component somehow to be able to validate the form before deciding whether to call the service or not.

Here's a short cut of "viewForm":

<div> <div *ngFor="let point of points; let x = index"> <mat-form-field class="example-full-width"> <input matInput type="text" [(ngModel)]="point.cValue" Placeholder=""> </mat-form-field> </div> </div> <app-footer></app-footer>

The footer component looks like this:

<footer class="footer"> <div class="button-row"> <button mat-raised-button (click)="save($event)">Save</button> <button mat-raised-button (click)="send($event)">Send</button> <button mat-raised-button (click)="noDeal($event)">No Deal</button> <button mat-raised-button (click)="deal($event)">Deal</button> </div> </footer>

Suresh Kumar Ariya · Accepted Answer · 2018-08-23 08:35:04Z

1

In viewForm Component:

You can expose public methods for validating the form input controls.

In footer Component:

@ViewChild(viewForm) vf: viewForm; save(e){ this.vf.validate(); } send(e){ this.vf.validate(); }

answered Aug 23, 2018 at 8:35

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

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

4 Comments

Pierre Messo Over a year ago

I imported the viewForm componen from the footer component and did what you suggested. I created a test funciton("testLog") that only write to console in viewForm and tried to call if from the "save" function in footer component but I get "annot read property 'testLog' of undefined"

Suresh Kumar Ariya Over a year ago

@ViewChild(viewForm) vf: viewForm; in this code, 'viewForm' refers to component class name.

Pierre Messo Over a year ago

Yes....that's how I did and I get intellisense when typing "vf." and I can see the testLog function popping up.

Suresh Kumar Ariya Over a year ago

If intellisense able to get testLog function. it should work. can you create stackblitz

Pierre Messo · Accepted Answer · 2018-08-24 08:43:44Z

I solved it with template driven validation:

<form name="inspectionForm" #inspectionForm="ngForm"> <div> <div *ngFor="let point of points; let x = index"> <mat-form-field class="example-full-width"> <input required matInput type="text" [(ngModel)]="point.cValue" Placeholder="" name="someName"> </mat-form-field> </div> </div> <app-footer [formValid]="inspectionForm.form.valid"></app-footer> </form>

And in my footer component I check if the form is valid. Thanks Suresh for your help.

Collectives™ on Stack Overflow

Angular 2+ validation in child component

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related