Angular2中如何获取表单的全部值？

嘿，既然你已经在用formControlName（说明是Angular响应式表单），那获取整个表单的所有值其实比单个取值要简单得多，给你几种常用的方式：

1. 直接用表单组的value属性（最常用） #

首先你得在组件类里先定义好你的FormGroup，比如：

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

@Component({ /* 组件元数据 */ })
export class YourComponent {
  // 定义表单组
  subscriptionForm: FormGroup;

  ngOnInit(): void {
    // 初始化表单，把所有控件加进来
    this.subscriptionForm = new FormGroup({
      subscriptionFormName: new FormControl(''),
      // 这里添加其他表单控件，比如 email: new FormControl('') 之类的
    });
  }

  OnSubmit(): void {
    // 直接拿到整个表单的键值对
    const allFormValues = this.subscriptionForm.value;
    console.log('表单全部数据:', allFormValues);
    // 要单个值的话也能直接取，比如 allFormValues.subscriptionFormName
  }
}

然后模板里要把表单和这个FormGroup绑定起来，不用再用模板引用变量啦：

<form [formGroup]="subscriptionForm">
  <input type="text" formControlName="subscriptionFormName" class="form-control" mdbInputDirective>
  <!-- 其他表单控件都用formControlName绑定到表单组里 -->
  
  <button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit()" mdbWavesEffect>
    Send <i class="fa fa-paper-plane-o ml-1"></i>
  </button>
</form>

2. 用getRawValue()获取包含禁用控件的值 #

如果你的表单里有禁用的控件，value属性会自动忽略它们。这时候用getRawValue()就能拿到所有控件的值，包括禁用的：

OnSubmit(): void {
  const allValuesIncludingDisabled = this.subscriptionForm.getRawValue();
  console.log('包含禁用控件的完整表单数据:', allValuesIncludingDisabled);
}

小补充：响应式表单里单个取值的正确姿势 #

你之前用#UserName取单个值的方式其实没必要，在响应式表单里，直接通过表单组的get()方法就能安全取单个控件的值：

const nameValue = this.subscriptionForm.get('subscriptionFormName')?.value;

这样比模板引用变量更符合响应式表单的设计逻辑，也更易维护~

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