Angular表单使用ngModel捕获字段值报错的解决方法咨询

报错原因 #

你使用的是Angular模板驱动表单，所有在<form>标签内使用[(ngModel)]的表单控件，默认需要绑定到表单的FormControl实例，Angular要求必须通过name属性作为该控件的唯一标识，缺少name属性就会触发你遇到的报错。

方案1：添加name属性（最常用，推荐） #

这是符合模板驱动表单设计规范的用法，适合需要使用表单内置校验、统一管理所有表单字段的场景。
你只需要给使用[(ngModel)]的input标签添加对应的name属性即可，属性名可以和你绑定的TS类变量名保持一致，方便维护：

<input 
  type="text" 
  cols="35" 
  rows="2" 
  placeholder="(minimum 3 characters)" 
  required 
  minlength="3" 
  [(ngModel)]="fullName"
  name="fullName"
/>

如果后续需要捕获address、cardNumber的值，对应给这两个input也加上[(ngModel)]和对应的name="address"、name="cardNumber"即可。

另外注意你当前的提交按钮直接加了routerLink="/confirmation"，点击后会直接跳转不会触发表单校验和提交逻辑，建议去掉这个属性，在submitForm方法里处理完逻辑后再通过Router跳转：
首先在TS类里引入Router：

import { Router } from '@angular/router';
// 构造函数里注入
constructor(private productsService: ProductsService, private router: Router) {}

submitForm(): void {
  // 可以先判断表单是否合法
  if (this.fullName.length >=3) {
    // 这里可以拿到所有绑定的字段值
    console.log('用户姓名：', this.fullName);
    console.log('订单总价：', this.totalPrice);
    // 处理完逻辑后跳转
    this.router.navigateByUrl('/confirmation');
  }
}

方案2：设置为standalone控件 #

如果你不需要把这个input纳入表单的统一管理，可以给ngModel添加standalone配置，就不需要加name属性：

<input 
  type="text" 
  cols="35" 
  rows="2" 
  placeholder="(minimum 3 characters)" 
  required 
  minlength="3" 
  [(ngModel)]="fullName"
  [ngModelOptions]="{standalone: true}"
/>

额外注意点 #

你TS类里的cardNumber定义的是number类型，但是input输入的默认是字符串，直接绑定会有类型不匹配的问题，建议把cardNumber: number = 0;改成cardNumber: string = '';避免运行时报错。

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