Angular响应式表单中子组件表单提交内容为空的解决方法

我看了你遇到的问题——在父组件表单里嵌套子组件后，提交时子组件的输入内容没被包含到表单值里，这确实是Angular响应式表单嵌套时常见的坑，咱们一步步来解决：

问题原因分析 #

你的代码里有两个关键问题导致子组件值没被提交：

1. 子组件的输入框没有绑定formControlName，只是用了[value]单向绑定，这种方式不会把值同步到父组件的FormGroup里；
2. 父组件传递给子组件的是整个usuarioForm，但子组件应该绑定的是表单里的嵌套FormGroup（比如endereco分组），而不是整个父表单。

具体修复步骤 #

1. 父组件：定义嵌套的FormGroup #

首先，你需要在父组件的表单里明确创建嵌套的endereco FormGroup，而不是直接把整个父表单传给子组件。

修改Pessoa.ts：

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  // 组件元数据
})
export class PessoaComponent {
  usuarioForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，包含嵌套的endereco分组
    this.usuarioForm = this.fb.group({
      nome: [''],
      endereco: this.fb.group({ // 这里定义子组件对应的FormGroup
        cep: [''],
        complemento: ['']
      })
    });
  }

  InsereUsuario(formValue: any) {
    console.log(formValue); // 现在能看到endereco的内容了
  }
}

修改Pessoa.html：

把传递给子组件的enderecoGroup改成父表单里的endereco分组：

<form [formGroup]="usuarioForm" novalidate>
  <div class="col-md-4">
    <div class="form-group">
      <label for="exampleInputNome">Nome</label>
      <input type="text" formControlName="nome" class="form-control" placeholder="Nome" />
    </div>
  </div>
  <!-- 传递嵌套的endereco FormGroup给子组件 -->
  <endereco [enderecoGroup]="usuarioForm.get('endereco')"></endereco>
  <button type="submit" class="btn btn-default" (click)="InsereUsuario(usuarioForm.value)">
    Enviar
  </button>
</form>

2. 子组件（Endereco.html）：为输入框绑定formControlName #

子组件里的输入框必须绑定到enderecoGroup对应的表单控件，而不是用[value]单向绑定：

<h4>Endereço</h4>
<div class="col-md-2">
  <div class="form-group" [formGroup]="enderecoGroup">
    <label for="exampleInputCep">Cep</label>
    <!-- 绑定formControlName到cep控件 -->
    <input type="text" class="form-control" placeholder="Cep" formControlName="cep" (blur)="GetAdress($event.target.value)">
  </div>
</div>
<div class="col-md-4">
  <div class="form-group" [formGroup]="enderecoGroup">
    <label for="exampleInputComplemento">Complemento</label>
    <!-- 绑定formControlName到complemento控件 -->
    <input type="text" class="form-control" placeholder="Complemento" formControlName="complemento">
  </div>
</div>

3. 子组件（Endereco.ts）：用patchValue更新表单值 #

当你通过接口获取到地址信息后，不要直接给endereco变量赋值，而是用patchValue把值同步到enderecoGroup里，这样表单才能捕获到这些值：

import { Input, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Endereco } from './endereco.model'; // 假设你有这个模型

@Component({
  selector: 'endereco',
  templateUrl: './endereco.html'
})
export class EnderecoComponent {
  @Input() enderecoGroup: FormGroup;

  GetAdress(cep: string) {
    this.servico.GetEndereco(cep)
      .subscribe(resposta => {
        // 使用patchValue把接口返回的值同步到表单组
        this.enderecoGroup.patchValue({
          complemento: resposta.complemento
          // 这里可以添加其他地址字段，比如rua, bairro等，只要表单里有对应的控件
        });
      });
  }
}

为什么这样能解决问题？ #

• Angular响应式表单的核心是FormGroup和FormControl的绑定，只有通过formControlName绑定的输入框，其值才会同步到对应的FormGroup中；
• 嵌套表单需要明确的父子FormGroup关系，子组件拿到的应该是父表单里的嵌套分组，而不是整个父表单；
• patchValue方法能安全地更新FormGroup中的部分控件值，确保表单状态和值的同步。

现在你再提交表单，子组件的cep和complemento值就会被包含到usuarioForm.value里了～

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