Angular中从NgForm获取邮箱和密码时出错，Angular 12 TypeScript代码运行报错求助

看起来你在使用NgForm处理注册表单时遇到了解构或类型相关的报错，我来帮你梳理下最常见的原因和对应的解决办法：

1. 先确认模板中的表单控件name属性是否正确 #

NgForm是通过控件的name属性来识别表单字段的，如果你的模板里没有给邮箱和密码输入框设置正确的name，f.form.value里就不会包含email和password这两个键，解构时自然会出错。

正确的模板示例应该是这样的：

<form #signupForm="ngForm" (ngSubmit)="onSubmit(signupForm)">
  <input 
    type="email" 
    name="email"  <!-- 这里的name必须和你解构的变量名一致 -->
    ngModel 
    required
    placeholder="邮箱">
  <input 
    type="password" 
    name="password"  <!-- 同样，name要匹配 -->
    ngModel 
    required
    placeholder="密码">
  <button type="submit">注册</button>
</form>

2. 解决TypeScript类型检查报错 #

Angular 12默认开启了严格模式，NgForm.form.value的默认类型是any，直接解构会触发类型检查警告或错误。你可以通过定义接口来约束表单值的类型：

首先在组件文件里定义一个表单接口：

interface AuthFormValues {
  email: string;
  password: string;
}

然后在解构时给form.value添加类型断言：

const { email, password } = f.form.value as AuthFormValues;

这样TypeScript就能识别这两个字段的类型，不会再报错。

3. 确保方法接收的是正确的NgForm实例 #

要保证你的提交方法接收的参数确实是NgForm类型，记得先导入NgForm：

import { NgForm } from '@angular/forms';

// 组件类中的提交方法
onSubmit(f: NgForm) {
  // 这里的f就是正确的NgForm实例
  const { email, password } = f.form.value as AuthFormValues;
  // 后续逻辑...
}

4. 增加必填项检查，避免undefined值 #

即使前面的配置都正确，也建议在调用signUp前检查字段是否为空，避免因为用户未填写就提交导致的错误：

if (!email || !password) {
  this.toastr.warning('请完整填写邮箱和密码');
  return;
}

修改后的完整代码示例 #

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
// 导入你的auth服务和toastr服务

interface AuthFormValues {
  email: string;
  password: string;
}

@Component({
  // 组件元数据
})
export class SignupComponent {
  constructor(
    private auth: AuthService,
    private router: Router,
    private toastr: ToastrService
  ) {}

  onSubmit(f: NgForm) {
    const { email, password } = f.form.value as AuthFormValues;

    // 检查必填项
    if (!email || !password) {
      this.toastr.warning('请完整填写邮箱和密码');
      return;
    }

    //TODO: do your checking here 
    this.auth.signUp(email, password) 
      .then((res) =>{ 
        this.router.navigateByUrl('/'); 
        this.toastr.success("Signup Success") 
      }) 
      .catch((err) => { 
        console.log(err.message); 
        this.toastr.error("Signup failed") 
      }) 
  }
}

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