Angular响应式表单：根据选择切换子表单并仅提交选中项

• 父组件统一管理子FormGroup的生命周期，根据单选框选中状态动态添加/移除对应子组件的FormGroup，避免未选中的子表单影响整体验证和提交数据
• 子组件不再主动修改父表单，改为接收父组件传入的FormGroup，保持组件独立性
• 监听单选框值变化，切换时清理旧子FormGroup并添加新的，确保仅当前选中的子表单处于激活状态
• 提交时直接提取选中的子表单数据，无需额外过滤

1. 父组件（selection.ts） #

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

@Component({
  selector: 'app-selection',
  templateUrl: './selection.component.html',
  styleUrls: ['./selection.component.css']
})
export class SelectionComponent implements OnInit{
  myForm: FormGroup;
  // 预定义所有子表单的FormGroup
  private subFormMap: { [key: string]: FormGroup } = {
    'selection1': new FormGroup({
      'textvalue': new FormControl('', Validators.required)
    }),
    'selection2': new FormGroup({
      'numbervalue': new FormControl('', [Validators.required, Validators.min(1)])
    }),
    'selection3': new FormGroup({
      'checkboxvalue': new FormControl(false, Validators.requiredTrue)
    })
  };

  constructor() { } 

  ngOnInit(): void {
    this.initForm();
    this.watchSelectionChange();
  }

  initForm() {
    this.myForm = new FormGroup({
      'selection': new FormControl('', Validators.required),      
    });
  }

  watchSelectionChange() {
    this.myForm.get('selection')?.valueChanges.subscribe(selectedKey => {
      // 移除所有已存在的子FormGroup
      Object.keys(this.subFormMap).forEach(key => {
        this.myForm.removeControl(key);
      });
      // 添加当前选中的子FormGroup
      if (selectedKey) {
        this.myForm.addControl(selectedKey, this.subFormMap[selectedKey]);
      }
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      const selectedKey = this.myForm.get('selection')?.value;
      // 仅提取选中的子表单数据和选择项
      const submitData = {
        selection: selectedKey,
        [selectedKey]: this.myForm.get(selectedKey)?.value
      };
      // 替换为你的实际提交逻辑
      console.log('提交数据:', submitData);
    }
  }
}

2. 父组件模板（selection.html） #

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <div>
        <input type="radio" name="selection" value="selection1" formControlName="selection">
        <label>Selection 1</label>
    </div>
    <div>
        <input type="radio" name="selection" value="selection2" formControlName="selection">
        <label>Selection 2</label>
    </div>
    <div>
        <input type="radio" name="selection" value="selection3" formControlName="selection">
        <label>Selection 3</label>
    </div>          
    <hr>
    <div class="subform">
        <app-subform1 *ngIf="myForm.get('selection').value == 'selection1'" [subForm]="myForm.get('selection1')"></app-subform1>
        <app-subform2 *ngIf="myForm.get('selection').value == 'selection2'" [subForm]="myForm.get('selection2')"></app-subform2>
        <app-subform3 *ngIf="myForm.get('selection').value == 'selection3'" [subForm]="myForm.get('selection3')"></app-subform3>
    </div>
    <div>
        <button 
            type="submit" 
            [disabled]="!myForm.valid">Save</button>
    </div>
</form>

3. 子组件（以subform1为例，subform2、subform3同理修改） #

subform1.ts #

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-subform1',
  templateUrl: './subform1.component.html',
  styleUrls: ['./subform1.component.css']
})
export class Subform1Component {
  @Input() subForm!: FormGroup;
}

subform1.html #

<div [formGroup]="subForm">
    <label>Subform1 value:</label>
    <input type="text" formControlName="textvalue">
</div>

• 父组件通过valueChanges监听单选框切换，动态维护子FormGroup的存在状态，确保整体表单的valid状态仅受选中的子表单影响
• 子组件通过@Input接收FormGroup，避免直接操作父表单，降低组件耦合度
• 提交时，未选中的子FormGroup已被移除，因此提交数据仅包含选中项和对应子表单内容

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