Question

我正在尝试将注册表单数据发送到我的服务器，但是接收到（错误请求）。我用邮递员测试了服务器，并且可以正确处理以下数据：

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

但是Angular存在问题，找不到是问题所在。

这是 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});
  }
}

这是 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);
        }
      );
  }

这是小的html注册表格- 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>

我放了一些控制台日志以查看表单发送的内容，并且看起来正确：

{用户名：“ root”} 用户名：“ root” 原始：对象

{电子邮件：“ root@gmail.com”} 电子邮件：“ root@gmail.com” 原始：对象

{密码：“ Pesho @”} 密码：“ Pesho @” 原始：对象

在Bootstrap中，我在先前的项目中使用了相同的逻辑，并且效果很好。在这种情况下，请使用Material，但我认为问题不出在这里。我在NestJS服务器终端上没有收到任何错误。

Answer 1

问题是您传递参数的顺序

这是您的 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});
  }
}

这是 auth.srvice.ts：：这里您接受用户名，密码，电子邮件

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

因此，要在 register.component.ts 或 auth.srvice.ts

中修复此开关参数

Angular中的POST http：// localhost：3000 / auth 400（Bad Request）

1 个答案: