Angular App with AWS Amplify and DynamoDB - Error with POST action on GraphQL

Question

I am making a basic Angular App using AWS Amplify and a DynamoDB backend.

I used the amplify add API command to generate the code for the Graphql API calls.

I am trying to populate the data in the table using an input form.

The following error is received in console when hitting submit:

{path: null, locations: null, message: "The variables input contains a field that is not defined for input object type 'CreateMembersInput' "}

As far as I can tell, the field names match across the schema, the API, the form input, and the api call. I followed the AWS documentation guide to create their restaurants example, and it worked fine. But after adjusting the schema and regenerating the graphql mutations and API, I cannot get this to submit at all.

Here is the schema:

type Members @model  @auth(rules: [{ allow: public }]){
  archeryGB: ID! @primaryKey
  firstName: String!
  lastName: String!
  DOB: String!
  joinDate: String!
  club: String!
  active: Boolean!
  primaryBowStyle: String!
  outdoorClassification: String!
  indoorClassification: String!
}

Here is the API.service.ts entry for CreateMembersInput:

export type CreateMembersInput = {
  archeryGB: string;
  firstName: string;
  lastName: string;
  DOB: string;
  joinDate: string;
  club: string;
  active: boolean;
  primaryBowStyle: string;
  outdoorClassification: string;
  indoorClassification: string;
  _version?: number | null;
};

Here is the constructor:

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]
    });
  }

The create function:

public onCreate(member: Members) {
    this.api
      .CreateMembers(member)
      .then((event) => {
        console.log('item created!');
        this.createForm.reset();
      })
      .catch((e) => {
        console.log('error creating member...', e);
      });

Here is the entry form:

<div class="form-body">
    <form
      autocomplete="off"
      [formGroup]="createForm"
      (ngSubmit)="onCreate(createForm.value)"
    >
      <div>
        <label>Archery GB Number </label>
        <input type="text" formControlName="archeryGB" autocomplete="off" />
      </div>
      <div>
        <label>First Name </label>
        <input type="text" formControlName="firstName" autocomplete="off" />
      </div>
      <div>
        <label>Last Name </label>
        <input type="text" formControlName="lastName" autocomplete="off" />
      </div>
      <div>
        <label>Date of Birth </label>
        <input type="date" formControlName="DOB" autocomplete="off" />
      </div>
      <div>
        <label>Club Joining Date </label>
        <input type="date" formControlName="joinDate" autocomplete="off" />
      </div>
      <div>
        <label>Club Name </label>
        <input type="text" formControlName="club" autocomplete="off" />
      </div>
      <div>
        <label>Active</label>
        <input type="radio" formControlName="active" autocomplete="off" />
      </div>
      <div>
        <label>Primary Bowstyle</label>
        <input type="text" formControlName="primaryBowstyle" autocomplete="off" />
      </div>
      <div>
        <label>Outdoor Classification</label>
        <input type="text" formControlName="outdoorClassification" autocomplete="off" />
      </div>
      <div>
        <label>Indoor Classification</label>
        <input type="text" formControlName="indoorClassification" autocomplete="off" />
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>

Answer 1

Found it (wow, that took too long!)

primaryBowstyle: ['', Validators.required],

is not the same as

primaryBowStyle: string;

The capitalisation is off!