Angular模板驱动表单：如何将子组件输入数据传递至父组件表单？

我帮你找出了几个关键问题，咱们一步步来解决：

核心问题分析与修复步骤 #

1. 事件名称不匹配（最直接的触发失败原因） #

你子组件定义的输出事件是nameEntered，但父组件模板里绑定的却是(nameEvent)——这就好比你在喊"张三"，但等着回应的是"李四"，父组件的receiveName方法自然永远不会被触发。

修复：
把父组件模板里的事件绑定改成和子组件输出一致的名称：

<app-applicant-information (nameEntered)="receiveName($event)"></app-applicant-information>

2. 传递数据的结构不合理 #

你子组件现在emit的是{ $event: any }，这是一个包裹了原始事件对象的容器，父组件要拿到输入值得写$event.$event.target.value，既麻烦又不直观。更好的做法是直接传递输入框的实际值。

修复子组件输入框与事件方法：
先给输入框做双向绑定，让组件的name属性和输入框值同步：

<!-- 把模板引用变量改成nameModel，避免和组件的name属性冲突 -->
<input type="text" pInputText name="name" id="name" [(ngModel)]="name" #nameModel="ngModel" required [minlength]="5" [maxlength]="40" placeholder="First LastName" (input)="onNameEntered()">

然后修改子组件的onNameEntered方法，直接传递组件的name值：

onNameEntered() {
  this.nameEntered.emit(this.name);
}

3. @Input()命名冲突 #

你子组件里用@Input() ngModel作为输入属性名，这会和Angular内置的ngModel指令冲突，导致不可预期的问题，必须重命名。

修复：

// 替换原来的@Input() ngModel，改成更清晰的名称
@Input() applicantInfo: ApplicantInformation = new ApplicantInformation(this.name,this.phone,this.address,this.city,this.state,this.zipCode);

4. 父组件接收值的同步处理 #

现在子组件传递的是字符串，父组件可以直接赋值，同时建议同步更新到你的firstColumnInformation对象里，这样submit时model里就能拿到最新值：

receiveName(nameValue: string) {
  this.name = nameValue;
  this.firstColumnInformation.name = nameValue;
}

完整修改后代码示例 #

子组件模板（部分） #

<input type="text" pInputText name="name" id="name" [(ngModel)]="name" #nameModel="ngModel" required [minlength]="5" [maxlength]="40" placeholder="First LastName" (input)="onNameEntered()">

子组件类 #

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[] = [];
  
  // 重命名输入属性，避免与内置ngModel冲突
  @Input() applicantInfo: ApplicantInformation = new ApplicantInformation(this.name,this.phone,this.address,this.city,this.state,this.zipCode);
  @Output() nameEntered = new EventEmitter<string>(); // 指定类型更规范

  onNameEntered() {
    this.nameEntered.emit(this.name); // 直接传递输入框绑定的name值
  }

  constructor() {
    this.sts = this.options.strAbbrs;
  }

  ngOnInit(): void {
    // 可选：从父组件传入的applicantInfo初始化本地属性
    this.name = this.applicantInfo.name;
    this.phone = this.applicantInfo.phone;
    // ...其他属性同理
  }
}

父组件模板（部分） #

<form #onePlusThreeColumnForm="ngForm">
  ...
  <!-- 修正事件绑定名称，并传入需要初始化的对象 -->
  <app-applicant-information (nameEntered)="receiveName($event)" [applicantInfo]="firstColumnInformation"></app-applicant-information>
  ...
  <button type="submit" class="p-button p-component" [disabled]="!onePlusThreeColumnForm.valid" (click)="login(onePlusThreeColumnForm)">
    Submit
  </button>
</form>

父组件类 #

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: ApplicantInformation = new ApplicantInformation('','','','','','');
  secondColumnInformation: BiometricInformation = new BiometricInformation('','',0,0,0,'');
  thirdColumnInformation: ApplicantInformation = new ApplicantInformation('','','','','','');

  model = new ThreeColumn(
    this.firstColumnInformation,
    this.secondColumnInformation,
    this.thirdColumnInformation
  );

  name: string = '';

  constructor() {
  }

  ngOnInit(): void {
  }

  receiveName(nameValue: string) {
    this.name = nameValue;
    // 同步更新到model对象，保证submit时数据最新
    this.firstColumnInformation.name = nameValue;
  }

  login(thisForm: NgForm) {
    console.log(this.model);
    console.log(JSON.stringify(thisForm.value));
  }
}

额外优化建议 #

如果需要传递整个ApplicantInformation对象（而不是单个name属性），可以在子组件中监听所有输入的变化，然后emit整个对象，这样父组件可以一次性更新对应的信息。另外，对于复杂表单场景，推荐使用Angular Reactive Forms，通过FormGroup在父子组件间共享表单控制，数据同步会更简洁，不需要手动emit事件。

内容的提问来源于stack exchange，提问作者Nosnetrom