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:
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:
I hope this is clear to get some ideas. Thank.
source to share
No one has answered this question yet
Check out similar questions: