title: Angular Material - ({status: 400, message: "validation errors",…} field Errors: [{codes: null, arguments: null ...)
body: <p>I try to send data in back end but i have a validation error :</p>
  
  <pre><code>{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
  </code></pre>
  
  <p>This is my component.ts :</p>
  
  <pre><code>    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 =&gt; {
              console.log(data);
              this.isSuccessful = true;
  
            },
            err =&gt; {
  
  
            }
          );
        }
  }
  </code></pre>
  
  <p>And This is my angular material page:</p>
  
  <pre><code>    &lt;div id="register" fxLayout="column"&gt;
  
      &lt;div id="register-form-wrapper" fxLayout="column" fxLayoutAlign="center center"&gt;
  
          &lt;div id="register-form" [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"&gt;
  
              &lt;div class="logo"&gt;
                  &lt;img src="assets/images/logos/fuse.svg"&gt;
              &lt;/div&gt;
  
              &lt;div class="title"&gt;CREATE AN ACCOUNT&lt;/div&gt;
  
              &lt;form name="registerForm" [formGroup]="registerForm" (ngSubmit)="onSubmit()"&gt;
  
                  &lt;mat-form-field appearance="outline"&gt;
                      &lt;mat-label&gt;Username&lt;/mat-label&gt;
                      &lt;input matInput formControlName="username" [errorStateMatcher]="matcher" required&gt;
                      &lt;mat-icon matSuffix class="secondary-text"&gt;account_circle&lt;/mat-icon&gt;
                      &lt;mat-error&gt;
                          Name is required
                      &lt;/mat-error&gt;
                  &lt;/mat-form-field&gt;
  
                  &lt;mat-form-field appearance="outline"&gt;
                      &lt;mat-label&gt;Email&lt;/mat-label&gt;
                      &lt;input matInput formControlName="email" [errorStateMatcher]="matcher" required&gt;
                      &lt;mat-icon matSuffix class="secondary-text"&gt;mail&lt;/mat-icon&gt;
                      &lt;mat-error *ngIf="registerForm.get('email').hasError('required')"&gt;
                          Email is required
                      &lt;/mat-error&gt;
                      &lt;mat-error *ngIf="registerForm.get('email').hasError('email')"&gt;
                          Please enter a valid email address
                      &lt;/mat-error&gt;
                  &lt;/mat-form-field&gt;
  
                  &lt;mat-form-field appearance="outline"&gt;
                      &lt;mat-label&gt;Password&lt;/mat-label&gt;
                      &lt;input matInput type="password" formControlName="password" [errorStateMatcher]="matcher" required&gt;
                      &lt;mat-icon matSuffix class="secondary-text"&gt;vpn_key&lt;/mat-icon&gt;
                      &lt;mat-error&gt;
                          Password is required
                      &lt;/mat-error&gt;
                  &lt;/mat-form-field&gt;
  
                  &lt;button mat-raised-button color="accent" class="submit-button" aria-label="CREATE AN ACCOUNT"
                          [disabled]="registerForm.invalid"&gt;
                      CREATE AN ACCOUNT
                  &lt;/button&gt;
              &lt;/form&gt;
  
              &lt;div class="register" fxLayout="column" fxLayoutAlign="center center"&gt;
                  &lt;span class="text"&gt;Already have an account?&lt;/span&gt;
                  &lt;a class="link" [routerLink]="'/login'"&gt;Login&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="alert alert-success" *ngIf="isSuccessful"&gt;
                  Your registration is successful!
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>