Angular响应式表单无法获取用户输入值，控制台输出空字符串求助

问题根源 #

你在(ngSubmit)中传递的emailLogin和passwordLogin是组件类里声明的初始空字符串变量，和表单控件的实际输入值没有关联，所以控制台输出始终是空值。响应式表单的正确取值方式是直接从FormGroup实例中获取控件值，而非模板传参。

修复步骤 #

1. 修改组件类代码

确保表单已正确初始化，并从loginForm中直接取值：

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

export class YourComponent {
  loginForm: FormGroup;
  emailLogin: string = "";
  passwordLogin: string = "";

  constructor(private fb: FormBuilder) {
    // 初始化带验证器的响应式表单
    this.loginForm = this.fb.group({
      emailLogin: ['', [Validators.required, Validators.email]],
      passwordLogin: ['', [Validators.required, Validators.minLength(8)]]
    });
  }

  submitLogin() {
    // 从表单控件中获取实际输入值
    this.emailLogin = this.loginForm.get('emailLogin')?.value || '';
    this.passwordLogin = this.loginForm.get('passwordLogin')?.value || '';

    console.log(this.passwordLogin);
    console.log(this.emailLogin);

    // 也可以直接获取整个表单的完整值
    // const formData = this.loginForm.value;
    // console.log(formData.emailLogin, formData.passwordLogin);
  }
}

2. 修改模板中的提交事件调用

移除不必要的参数传递：

<form [formGroup]="loginForm" (ngSubmit)="submitLogin()">
  <!-- 其余表单内容保持不变 -->
</form>

补充说明 #

响应式表单的核心是通过FormGroup和FormControl统一管理表单的状态、验证规则和输入值，所有操作都应该围绕loginForm实例进行，这样才能保证获取到的是用户实际输入的内容。

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