Angular 5 多组件模板驱动表单开发问题求助

看起来你在开发Angular模板驱动表单时遇到了两个核心问题：父组件提交时无法获取子组件的表单值，还有代码里的一些小错误导致的控制台报错。我来一步步帮你解决：

1. 核心问题：子组件表单控件未注册到父表单 #

在模板驱动表单中，子组件的ngModel控件默认不会自动注册到父组件的NgForm实例中。要解决这个问题，你需要在每个子组件的@Component元数据中添加viewProviders，让子组件继承父组件的表单容器：

步骤1：修改子组件的TypeScript代码 #

在EmployeeComponent和ExperiencesAndEducationComponent的类文件中，添加以下配置：

import { Component, OnInit } from '@angular/core';
// 导入需要的表单类
import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css'],
  // 添加这一行，让子组件使用父组件的NgForm容器
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class EmployeeComponent implements OnInit {
  employee: any = {}; // 确保你初始化了这个对象

  ngOnInit(): void {
  }
}

同样的配置复制到ExperiencesAndEducationComponent中，这样子组件的所有表单控件就会被注册到父组件的f表单实例里了。

2. 修复代码中的其他错误 #

错误1：Gender单选框的绑定问题 #

你的Employee组件中，第二个Female单选框没有绑定[(ngModel)]，也没有给单选框组添加#employeeGender="ngModel"，导致控制台报错employeeGender is undefined。修改后的代码：

<div class="form-group">
  <label> Gender: </label>
  <label for="male"> 
    Male 
    <input type="radio" name="gender" value="m" id="male" [(ngModel)]="employee.gender" #employeeGender="ngModel" required>
  </label>
  <label for="female"> 
    Female 
    <input type="radio" name="gender" value="f" id="female" [(ngModel)]="employee.gender" required>
  </label>
  <div class="alert alert-danger mt-2" *ngIf="employeeGender.errors?.required && employeeGender.touched">
    Gender Is Required
  </div>
</div>

• 给两个单选框都绑定了[(ngModel)]
• 给第一个单选框添加了#employeeGender="ngModel"（单选框组只需要给其中一个加即可）
• 添加了required验证

错误2：错误提示文本错误 #

你的ExperiencesAndEducation组件中，错误提示文本写错了，比如Experience的提示写成了"Last Name Is Required"，修改成对应字段的提示：

<!-- Experience的错误提示 -->
<div class="alert alert-danger mt-2" *ngIf="employeeExperiance.errors?.required && employeeExperiance.touched">
  Experience Is Required
</div>

<!-- Education的错误提示 -->
<div class="alert alert-danger mt-2" *ngIf="employeeEducation.errors?.required && employeeEducation.touched">
  Education Is Required
</div>

错误3：拼写和属性不一致问题 #

• experiance拼写错误，应该是experience（修改name属性和ngModel绑定的变量名）
• 输入框的id和label的for属性要保持大小写一致，比如name输入框的id="name"对应label for="name"

3. 验证提交功能 #

修改完成后，当你点击Submit按钮时，父组件的onSubmit方法就能打印出包含所有子组件字段的表单值了，比如：

{
  name: "xxx",
  address: "xxx",
  gender: "m",
  experience: "xxx",
  education: "xxx"
}

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