Submit form from parent component using Angular

I created a form with a template in one of my components. This form component is the grandson of the component that has a submit button. I need to submit a form from a grand parent and keep the same user input validation (with ngForm validity). I've seen some documentation using the @ViewChild decorator, but I couldn't apply it to the great child.

My folder structure looks like this:

enter image description here

I'm going to show the main parts of the code for simplicity:

The form is placed in right-panel.component.html / right-panel.component.ts

@Component({
selector: 'vp-rightpanel',
templateUrl: 'right-panel.component.html',
styleUrls: ['right-panel.component.css'],
moduleId: module.id
})
export class RightPanelComponent implements OnChanges , OnInit{...

      

Parent component - candidate-verification .component.html / candid-verification.component.ts

<div class="col-md-6 right-panel-container">
    <vp-rightpanel *ngIf="showRightpanel" [rating]="starRating" (openAddEditWorkHistoryClicked)="onOpenAddEditWorkHistoryClicked($event)"></vp-rightpanel>       
</div>

      

The grand-parent component is app.component.ts / app.component.html, which injects a container (candid-verification.component.ts) using routes, but this is the ONE that has a submit button:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
        <ul class="nav navbar-nav navbar-right">                               
            <li><button (click)="saveAndFinish()"type="button" class="btn btn-default btn-sm">Save and Finish</button></li>                 
        </ul>
 </div>

<router-outlet></router-outlet>  

      

The module that imports and manages routes looks like this:

const childRoutes: Routes = [
{ path: 'candidate-verification', component: CandidateVerificationComponent     
},
{ path: '', redirectTo: 'candidate-verification', pathMatch: 'full' }
];

@NgModule({
...
declarations: [  
    CandidateVerificationComponent,
    RightPanelComponent
]
 ...

      

What the app looks like:

enter image description here

I hope this is clear to get some ideas. Thank.

+3


source to share





All Articles