Angular+AWS Amplify+DynamoDB应用GraphQL POST请求报错排查

错误核心原因 #

提交表单时触发的CreateMembersInput字段未定义错误，根源是字段大小写不匹配：

• Schema和自动生成的CreateMembersInput类型中，字段为primaryBowStyle（驼峰命名，S大写）
• 但表单构造器与HTML表单里使用的是primaryBowstyle（s小写），导致GraphQL无法识别该输入字段

修复步骤 #

将表单构造器和HTML表单中的字段名统一为primaryBowStyle，与Schema、API类型保持一致：

1. 修改表单构造器代码 #

把primaryBowstyle替换为primaryBowStyle：

constructor(private api: APIService, private fb: FormBuilder) {
    this.createForm = this.fb.group({
      archeryGB: ['', Validators.required],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      DOB: ['', Validators.required],
      joinDate: ['', Validators.required],
      club: ['', Validators.required],
      active: ['', Validators.required],
      primaryBowStyle: ['', Validators.required], // 修正字段名
      outdoorClassification: ['', Validators.required],
      indoorClassification: ['', Validators.required]
    });
  }

2. 修改HTML表单代码 #

同步修改对应输入框的formControlName：

<div>
  <label>Primary Bowstyle</label>
  <input type="text" formControlName="primaryBowStyle" autocomplete="off" /> <!-- 修正字段名 -->
</div>

额外注意事项 #

• 后续调整Schema后执行amplify codegen重新生成API代码时，务必同步检查前端表单、类型定义的字段名是否一致
• 全程保持字段命名统一：Schema定义 → 自动生成的API类型 → 前端表单 → API调用参数，避免因大小写、拼写差异触发同类错误

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