Angular响应式表单点击按钮时如何仅提交第一个fieldset的数据

我来帮你搞定这个需求～要实现点击按钮时仅提交第一个fieldset的表单数据，有两种实用的方案，结合你的Angular表单场景，我给你具体的代码示例和说明：

方案一：拆分表单为子FormGroup（推荐） #

这种方式把两个fieldset对应的表单控件分别放在独立的子FormGroup里，提交时直接取第一个子组的值，逻辑清晰还方便统一验证。

组件类代码 #

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

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent {
  signupForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 拆分表单为两个子组：personalInfo对应第一个fieldset，otherInfo对应第二个
    this.signupForm = this.fb.group({
      personalInfo: this.fb.group({
        userName: ['', Validators.required]
        // 第一个fieldset里的其他控件都添加到这个子组中
      }),
      otherInfo: this.fb.group({
        // 第二个fieldset的控件放在这里
      })
    });
  }

  onSubmit() {
    // 先验证第一个子组的有效性
    const personalInfoGroup = this.signupForm.get('personalInfo');
    if (personalInfoGroup.valid) {
      // 仅提取第一个子组的数据
      const submitData = personalInfoGroup.value;
      console.log('要提交的第一个字段集数据:', submitData);
      // 这里替换成你的API提交逻辑
    }
  }
}

模板代码修改 #

<form id="myform" [formGroup]="signupForm">
  <!-- 第一个fieldset绑定到personalInfo子组 -->
  <fieldset formGroupName="personalInfo">
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Full name" formControlName="userName" required>
      <mat-error *ngIf="signupForm.get('personalInfo.userName').hasError('required')">
        Full Name is <strong>required</strong>
      </mat-error>
    </mat-form-field>
    <!-- 第一个fieldset的其他控件 -->
  </fieldset>

  <!-- 第二个fieldset绑定到otherInfo子组 -->
  <fieldset formGroupName="otherInfo">
    <!-- 第二个fieldset的控件 -->
  </fieldset>

  <!-- 使用type="button"避免默认表单提交，绑定点击事件 -->
  <button type="button" (click)="onSubmit()">提交第一个字段集数据</button>
</form>

方案二：手动提取目标控件值 #

如果不想改动原有表单结构，也可以在提交时手动筛选出第一个fieldset对应的控件值：

组件类代码 #

onSubmit() {
  // 手动提取第一个fieldset里的控件值，这里以userName为例，你可以添加其他需要的控件
  const submitData = {
    userName: this.signupForm.get('userName').value
    // 把第一个fieldset的其他控件都在这里列出
  };

  // 验证目标控件的有效性（如果有多个控件，需要逐个检查）
  const userNameControl = this.signupForm.get('userName');
  if (userNameControl.valid) {
    console.log('要提交的第一个字段集数据:', submitData);
    // 执行提交逻辑
  }
}

注意事项 #

• 如果你的按钮是type="submit"，记得在提交方法里添加event.preventDefault()来阻止默认的表单提交行为，避免页面刷新。
• 方案一更适合第一个fieldset包含多个控件的场景，后续维护和验证都更省心。

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