时间戳

首页 > 解决方案 > Angular Material - ({status: 400, message: "validation errors",...} field Errors: [{codes: null, arguments: null ...)

angular - Angular Material - ({status: 400, message: "validation errors",...} field Errors: [{codes: null, arguments: null ...)

问题描述

我尝试在后端发送数据，但出现验证错误：

{status: 400, message: "validation error",…}
fieldErrors: [{codes: null, arguments: null, defaultMessage: "ne peut pas être vide", objectName: "NotBlank",…},…]
0: {codes: null, arguments: null, defaultMessage: "ne peut pas être vide", objectName: "NotBlank",…}
arguments: null
bindingFailure: false
code: null
codes: null
defaultMessage: "ne peut pas être vide"
field: "username"
objectName: "NotBlank"
rejectedValue: null
1: {codes: null, arguments: null, defaultMessage: "ne peut pas être vide", objectName: "NotBlank",…}
2: {codes: null, arguments: null, defaultMessage: "ne peut pas être vide", objectName: "NotBlank",…}
message: "validation error"
status: 400

这是我的 component.ts ：

    import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
    import { AbstractControl, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators, NgForm } 
    from '@angular/forms';
    import { Subject, from } from 'rxjs';
    import { takeUntil } from 'rxjs/internal/operators';

    import { FuseConfigService } from '@fuse/services/config.service';
    import { fuseAnimations } from '@fuse/animations';
    import { AuthService } from 'app/services/auth.service';
    import { MyErrorStateMatcher } from 'app/helpers/MyErrorStateMatcher ';

    @Component({
    selector     : 'register',
    templateUrl  : './register.component.html',
    styleUrls    : ['./register.component.scss'],
    encapsulation: ViewEncapsulation.None,
    animations   : fuseAnimations
    })
    export class RegisterComponent implements OnInit
    {
    registerForm: FormGroup;
    matcher = new MyErrorStateMatcher();
     isSuccessful = false;

    constructor(
        private _fuseConfigService: FuseConfigService,
        private _formBuilder: FormBuilder,
        private authService: AuthService
    )
    {
        // Configure the layout
        this._fuseConfigService.config = {
            layout: {
                navbar   : {
                    hidden: true
                },
                toolbar  : {
                    hidden: false
                },
                footer   : {
                    hidden: true
                },
                sidepanel: {
                    hidden: true
                }
            }
        };

    }


    // -----------------------------------------------------------------------------------------------------
    // @ Lifecycle hooks
    // -----------------------------------------------------------------------------------------------------

    /**
     * On init
     */
    ngOnInit(): void
    {
        this.registerForm = this._formBuilder.group({
            username           : ['', Validators.required],
            email          : ['', [Validators.required, Validators.email]],
            password       : ['', Validators.required],
        });
    }
     onSubmit() {

        this.authService.register(this.registerForm).subscribe(
          data => {
            console.log(data);
            this.isSuccessful = true;

          },
          err => {


          }
        );
      }
}

这是我的角度材料页面：

    <div id="register" fxLayout="column">

    <div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center">

        <div id="register-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">

            <div class="logo">
                <img src="assets/images/logos/fuse.svg">
            </div>

            <div class="title">CREATE AN ACCOUNT</div>

            <form name="registerForm" [formGroup]="registerForm" (ngSubmit)="onSubmit()">

                <mat-form-field appearance="outline">
                    <mat-label>Username</mat-label>
                    <input matInput formControlName="username" [errorStateMatcher]="matcher" required>
                    <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                    <mat-error>
                        Name is required
                    </mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>Email</mat-label>
                    <input matInput formControlName="email" [errorStateMatcher]="matcher" required>
                    <mat-icon matSuffix class="secondary-text">mail</mat-icon>
                    <mat-error *ngIf="registerForm.get('email').hasError('required')">
                        Email is required
                    </mat-error>
                    <mat-error *ngIf="registerForm.get('email').hasError('email')">
                        Please enter a valid email address
                    </mat-error>
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>Password</mat-label>
                    <input matInput type="password" formControlName="password" [errorStateMatcher]="matcher" required>
                    <mat-icon matSuffix class="secondary-text">vpn_key</mat-icon>
                    <mat-error>
                        Password is required
                    </mat-error>
                </mat-form-field>

                <button mat-raised-button color="accent" class="submit-button" aria-label="CREATE AN ACCOUNT"
                        [disabled]="registerForm.invalid">
                    CREATE AN ACCOUNT
                </button>
            </form>

            <div class="register" fxLayout="column" fxLayoutAlign="center center">
                <span class="text">Already have an account?</span>
                <a class="link" [routerLink]="'/login'">Login</a>
            </div>
            <div class="alert alert-success" *ngIf="isSuccessful">
                Your registration is successful!
            </div>
        </div>

    </div>

</div>

标签： angularangular-material

解决方案

这是一个 400 错误，表示请求错误。从你的错误我搜索了这个

“Bne peut pas être vide”，意思是不能为空

所以我猜你显然是在发送一些空的东西。它关于用户名为空的说法。如果您发送它但仍然收到错误，那么您一定是发送不正确。检查 api 文档以获取参数及其类型。

更新：

您的以下代码没有任何价值，这只会创建您的表单。

`this.registerForm = this._formBuilder.group({
            username  : ['', Validators.required],
            email     : ['', [Validators.required, Validators.email]],
            password  : ['', Validators.required],
  });`

获取表单值后发送数据

const body = {
  username: form.value.username,
    email:   form.value.email,
    password:  form.value.password,
}

然后你的 onSubmit(form)

this.authService.register(body).subscribe(
      data => {
        console.log(data);
        this.isSuccessful = true;

      },
      err => {
      }
 );

在 onSubmit() 中的 HTML 传递表单中

<form [formGroup]="registerForm" (ngSubmit)="onSubmit(registerForm)">

推荐阅读