I have a button in a child form component and in the from parent component I want to push a function to the child component when the onClose() function is clicked from within the child component. I've tried the method below but the issue is it will work on the first form but not the rest. I would also like to pass other functions as well, including a onSubmit. For me to proceed I will need to figure out what i'm doing wrong here. I've been at this for a few days now any help is appreciated.Thanks
child form component, in the template url it contains the button for Onclose()
import { Component, OnInit, NgModule, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators, AbstractControl, ValidatorFn,Form } from '@angular/forms';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
@Component({
selector: 'app-editgraphs',
templateUrl: './editgraphs.component.html',
styleUrls: ['./editgraphs.component.scss']
})
export class EditgraphsComponent implements OnInit {
@Input() eGraphtitle: string;
@Output() close: EventEmitter<any> = new EventEmitter();
graphDataForm: FormGroup;
constructor(private fb: FormBuilder,){}
ngOnInit(): void {
this.graphDataForm = this.fb.group({
sDepartment: new FormControl(null, [Validators.required])
});
}
onClose() {this.close.emit();}
onClose2() {this.close.emit();}
parent component
import { Component, Inject, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { debug } from 'util';
import { EditgraphsComponent} from './../../../shared/forms/editgraphs/editgraphs.component'
@Component({
selector: 'app-payments',
templateUrl: './payments.component.html',
styleUrls: ['./payments.component.scss']
})
export class PaymentsComponent {
@ViewChild(EditgraphsComponent) private graphComponent: EditgraphsComponent;
//graph modal titles
egraph1Title: string = 'YTD Comparison Data';
constructor() {}
onClose() {
this.graphComponent.graphDataForm.reset();
console.log('Resseting and closing YCPC graph.');
}
onClose2() {
this.graphComponent.graphDataForm.reset();
console.log('Resseting and closing CMCPG graph.');
}
Parent Template URL
<app-editgraphs #graphComponent [eGraphtitle]="egraph1Title" (close)="onClose($event)"></app-editgraphs>
<app-editgraphs #graphComponent [eGraphtitle]="egraph2Title" (close)="onClose2($event)"></app-editgraphs>