Angular5嵌套响应式表单提交问题求助：报错及输入不显示

我帮你梳理了遇到的两个问题，咱们一步步来修复：

问题1：TypeError: Cannot read property 'emails' of undefined #

这个错误的核心是模板尝试访问未初始化的表单控件或数据模型属性。当组件初始化时，emails对应的FormArray或者user对象里的emails数组可能没有被正确初始化，导致模板渲染时找不到这个属性。

修复步骤： #

1. 初始化数据模型和表单控件
   在组件类中，先确保user对象的emails是一个空数组，同时用FormBuilder创建表单时，把emails初始化为FormArray，并且至少包含一个空的邮箱控件组：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  userForm: FormGroup;
  user = {
    name: '',
    emails: [] // 初始化emails为空数组
  };

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    // 初始化表单，emails为FormArray，默认添加一个邮箱控件
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      emails: this.fb.array([this.createEmailGroup()])
    });
  }

  // 辅助方法：创建单个邮箱的FormGroup
  createEmailGroup(): FormGroup {
    return this.fb.group({
      email: ['', Validators.email]
    });
  }

  // 用getter简化模板中对emails FormArray的访问
  get emails(): FormArray {
    return this.userForm.get('emails') as FormArray;
  }
}

2. 模板中使用安全访问或绑定正确的控件
   修改模板，通过getter访问emails控件，避免直接访问可能未定义的属性：

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <input formControlName="name" placeholder="Name">

  <div formArrayName="emails">
    <!-- 使用emails.controls遍历表单数组 -->
    <div *ngFor="let email of emails.controls; let i=index" [formGroupName]="i">
      <input formControlName="email" placeholder="Email">
      <button type="button" (click)="removeEmail(i)">Remove</button>
    </div>
  </div>

  <button type="button" (click)="addEmail()">Add Email</button>
  <button type="submit">Save</button>
</form>

问题2：保存时新增一行但输入框未生成 #

这个问题是因为只更新了数据模型，没有同步更新表单控件数组。Angular响应式表单是基于控件实例的，只有当FormArray中新增了FormGroup，模板才会渲染对应的输入框。

修复步骤： #

修改addEmail方法，直接向FormArray中添加新的邮箱控件组，而不是只修改user.emails：

addEmail() {
  // 向FormArray中push新的FormGroup
  this.emails.push(this.createEmailGroup());
}

// 可选：添加移除邮箱的方法
removeEmail(index: number) {
  this.emails.removeAt(index);
}

表单提交处理 #

最后完善提交方法，确保提交时可以获取到完整的表单数据：

onSubmit() {
  if (this.userForm.invalid) {
    return;
  }
  // 这里可以将表单数据发送到后端，或者更新本地user对象
  this.user = { ...this.userForm.value };
  console.log('提交的用户数据:', this.user);
}

这样修改后，两个问题都能解决：初始化时不会出现undefined错误，新增邮箱时模板会正确渲染新的输入框，提交也能正常获取表单数据。

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