在 Angular 中发布 http://localhost:3000/auth 400（错误请求）

Question

I'm trying to send register form data to my server, but receive (Bad Request). I test my server with postman & it work correctly with this data:

{
    "username": "root",
    "email": "root@gmail.com",
    "password": "Pesho@"
}

But have problem with Angular & can't find were is the problem.

This is register.component.ts:

export class RegisterComponent implements OnInit {
  public registerFormGroup: FormGroup;

  constructor(
    private readonly auth: AuthService,
  ) { }

  ngOnInit() {
    this.registerFormGroup = this.auth.registerFormGroup(this.registerFormGroup);
  }

  public register(username: string, email: string, password: string) {
    this.auth.register(username, email, password);
    console.log({username});
    console.log({email});
    console.log({password});
  }
}

This is auth.srvice.ts:

public register(username: string, password: string, email: string): Subscription {
    return this.http.post('http://localhost:3000/auth',
      {
        username,
        email,
        password,
      })
      .subscribe(
        (success: any) => {
          this.notificator.success(success.message);
          setTimeout(() => {
            this.login(email, password);
          }, 1500);
        }
        ,
        (err) => {
          this.notificator.error(err.error.message);
        }
      );
  }

And this is the small html register form - register.component.html:

<form class="example-form" [formGroup]="this.registerFormGroup"
      (ngSubmit)="this.register(name.value, email.value, password.value)" autocomplete="off">

      <mat-card-content>

        <mat-form-field class="example-full-width">
          <input matInput #name autocomplete="off" formControlName="name" type="text" class="form-control"
          placeholder="Name *">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #email autocomplete="off" #email matInput class="form-control" placeholder="Email *" type="email"
          formControlName="email">
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input matInput #password formControlName="password" type="password" class="form-control" placeholder="Password *">
        </mat-form-field>

      </mat-card-content>

      <button mat-stroked-button color="accent" class="btn-block" type="submit" value="Sign Up">Register</button>

    </form>

I put few console logs to see what the form sends & they are looking correct:

{username: "root"} username: "root" proto : Object

{email: "root@gmail.com"} email: "root@gmail.com" proto : Object

{password: "Pesho@"} password: "Pesho@" proto : Object

I used the same logic in previous project with Bootstrap & it worked perfect. In this case use Material, but I don't think the problem is from there. I didn't receive any errors in NestJS server terminal.

Answer 1

Problem is the order in which you are passing your arguments

This is your register.component.ts:

public register(username: string, email: string, password: string) {
this.auth.register(username, email, password); <---- Here you are passing username,email,password
console.log({username});
console.log({email});
console.log({password});
  }
}

This is auth.srvice.ts: Here you are accepting username,password,email

public register(username: string, password: string, email: string): Subscription {
return this.http.post('http://localhost:3000/auth',
  {
    username,
    email,
    password,
  })

So to fix this switch arguments in either register.component.ts or auth.srvice.ts