It seems like this should be a straightforward task, but I'm encountering conflicting instructions on how to achieve it. I have three child components, each with their own set of input controls that are supposed to feed into a parent component. However, the parent component is not receiving the input from the child components. The code snippet below is what I currently have; it may be incomplete, as I've been trying different methods to make this work. Any help would be greatly appreciated!
Child template #1 (partial):
<input type="text"
pInputText
name="name" id="name"
ngModel #name="ngModel"
required [minlength]="5" [maxlength]="40"
placeholder="First LastName"
(change)="onNameEntered($event)">
Child component:
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DropdownOptions } from 'src/assets/dropdownOptions';
import { ApplicantInformation } from 'src/app/_models/applicantInformation.model';
@Component({
selector: 'app-applicant-information',
templateUrl: './applicant-information.component.html',
styleUrls: ['./applicant-information.component.css']
})
export class ApplicantInformationComponent implements OnInit {
name: string = '';
phone = '';
address = '';
city = '';
state = '';
zipCode = '';
options: any = new DropdownOptions;
sts: string[] = [];
@Input() ngModel: any = new ApplicantInformation(this.name,this.phone,this.address,this.city,this.state,this.zipCode)
@Output() nameEntered = new EventEmitter<{ $event: any }>();
onNameEntered($event: any) {
this.nameEntered.emit({$event});
}
constructor() {
this.sts = this.options.strAbbrs;
}
ngOnInit(): void {
}
}
Parent template (partial):
<form #onePlusThreeColumnForm="ngForm">
...
<app-applicant-information
(nameEvent)="receiveName($event)"></app-applicant-information>
...
<button
type="submit"
class="p-button p-component"
[disabled]="!onePlusThreeColumnForm.valid"
(click)="login(onePlusThreeColumnForm)">
Submit
</button>
</form>
Parent component:
import { Component, OnInit, ViewChild } from '@angular/core';
import { ApplicantInformation } from 'src/app/_models/applicantInformation.model';
import { BiometricInformation } from 'src/app/_models/biometricInformation.model';
import { ThreeColumn } from '../../_models/threeColumn.model';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-one-plus-three-column-form',
templateUrl: './one-plus-three-column-form.component.html',
styleUrls: ['./one-plus-three-column-form.component.css']
})
export class OnePlusThreeColumnFormComponent implements OnInit {
firstColumnInformation: any = new ApplicantInformation('','','','','','');
secondColumnInformation: any = new BiometricInformation('','',0,0,0,'');
thirdColumnInformation: any = new ApplicantInformation('','','','','','');
constructor() {
}
model = new ThreeColumn(
this.firstColumnInformation,
this.secondColumnInformation,
this.thirdColumnInformation
);
ngOnInit(): void {
}
name: string = '';
receiveName($event: any) {
this.name = $event;
}
login(thisForm: NgForm) {
console.log(this.model);
console.log(JSON.stringify(thisForm.value));
}
}
Console output: https://i.sstatic.net/RawcB.png