无需FormGroup，Angular子组件嵌套表单并复用片段的实现方法问询

完全可以实现你的需求，依赖Angular模板驱动表单的特性，子组件内的表单控件会自动注册到父级NgForm中，无需手动创建FormGroup，具体实现如下：

1. 子组件实现 #

子组件仅需编写表单控件模板，每个控件添加ngModel和name属性（这是自动注册到父表单的关键），同时可封装获取自身表单数据的方法：

子组件模板（child.component.html） #

<div class="form-group">
  <label>邮箱</label>
  <input type="email" name="email" ngModel required email>
</div>
<div class="form-group">
  <label>用户名</label>
  <input type="text" name="username" ngModel required minlength="3">
</div>

子组件类（child.component.ts） #

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UserProfile } from './user-profile.model';

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  // 封装子组件表单数据为UserProfile对象的方法
  getProfileData(form: NgForm): UserProfile {
    const profile = new UserProfile();
    profile.email = form.value.email;
    profile.username = form.value.username;
    return profile;
  }
}

2. 父组件实现 #

父组件的表单直接包含子组件标签，子组件内的控件会自动被父NgForm收录，提交时可直接获取完整表单数据，或调用子组件方法获取封装后的对象：

父组件模板（parent.component.html） #

<form #f="ngForm" (ngSubmit)="onSubmit(f)" id="f">
  <child></child>
  
  <div class="form-group">
    <input type="checkbox" id="terms" name="terms" ngModel>
    <label for="terms">同意服务条款</label>
  </div>

  <input type="submit" id="btnSubmit" [disabled]="!f.valid">
</form>

父组件类（parent.component.ts） #

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ChildComponent } from './child.component';
import { UserProfile } from './user-profile.model';

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  @ViewChild(ChildComponent) private childComp!: ChildComponent;

  onSubmit(form: NgForm): void {
    // 方式1：直接获取完整表单数据（包含子组件+父组件控件）
    console.log('完整表单数据:', form.value);

    // 方式2：调用子组件方法获取封装后的用户对象，再补充父组件的条款数据
    const userProfile = this.childComp.getProfileData(form);
    userProfile.acceptTerms = form.value.terms;
    
    // 执行提交逻辑（如API请求）
    console.log('待提交的用户数据:', userProfile);
  }
}

关键注意事项 #

• 子组件内的每个表单控件必须添加name属性，否则ngModel无法将控件注册到父表单。
• 子组件的表单验证规则（如required、email）会自动同步到父表单的valid状态，可直接用于控制提交按钮的禁用状态。
• 若不需要子组件控件暴露在父表单的value中，也可通过@Input/@Output实现父子组件的数据双向绑定，但上述自动注册的方式更简洁高效。

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