title: 422 (Unprocessable Entity) in Angular to post in laravel login api
body: <p>i am trying to login using frontend(angular 4) to larvel auth api then i am getting this error on console log.</p>
  
  <pre><code>422 (Unprocessable Entity)
  </code></pre>
  
  <p>it looks like sending empty form fields, this is response</p>
  
  <pre><code>{"message":"The given data was invalid.","errors":{"email":["The email field is required."],"password":["The password field is required."]}}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ygvRn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ygvRn.png" alt="enter image description here"></a></p>
  
  <p>It work fine in postman application for test, i also change content type(application/json and application/x-www-form-urlencoded) on angular code.</p>
  
  <p>the error happens in login, for registration everything work fine.</p>
  
  <p>this is login.components.ts file</p>
  
  <pre><code>&lt;div class="modal-body"&gt;
        &lt;form [formGroup]="loginForm"&gt;
          &lt;div class="input-group"&gt;
            &lt;input type="email" class="form-control loc2" formControlName="email" placeholder="{{ 'LOGIN_DIALOG.EMAIL_PLACEHOLDER' | translate}}" required=""&gt;
            &lt;p *ngIf="loginForm.get('email').hasError('validateEMAIL') &amp;&amp; (loginForm.get('email').touched || formSubmit)" class="value-err show"&gt;{{ 'LOGIN_DIALOG.EMAIL_INVALID_MSG' | translate}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="input-group"&gt;
            &lt;input type="password" class="form-control loc" formControlName="password" placeholder="{{ 'LOGIN_DIALOG.PASSWORD_PLACEHOLDER' | translate}}" required=""&gt;
            &lt;p *ngIf="loginForm.get('password').hasError('minlength') &amp;&amp; (loginForm.get('password').touched || formSubmit)" class="value-err show"&gt;{{ 'LOGIN_DIALOG.PASSWORD_INVALID_LEN_MSG' | translate}}&lt;/p&gt;
            &lt;p *ngIf="loginForm.get('password').hasError('required') &amp;&amp; (loginForm.get('password').touched || formSubmit)" class="value-err show"&gt;{{ 'LOGIN_DIALOG.PASSWORD_REQUIRED' | translate}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;p class="pull-right space10"&gt;{{ 'LOGIN_DIALOG.PASSWORD_FORGET' | translate}} &lt;/p&gt;
          &lt;div class="form-group"&gt;
            &lt;button type="button" (click)="onClickLogin()" class="btn up me"&gt;{{ 'LOGIN_DIALOG.LOGIN_BUTTON' | translate}}&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="form-group our"&gt;
            &lt;input type="checkbox" id="custom_checkbox2"&gt;
            &lt;label for="custom_checkbox2"&gt;{{ 'LOGIN_DIALOG.REMEMBER_ME' | translate}} &lt;/label&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        &lt;p class="text-center"&gt;{{ 'LOGIN_DIALOG.LOGIN_WITH_MSG' | translate}}&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>this is auth.service.ts file for login function</p>
  
  <pre><code>logInUser(signInData) {
      this.http.post(
        'api/login', { signInData }
      ).subscribe((res: Response) =&gt; {
        const data = res.json();
        if (data.error == 1) {
         // const message = data.error.user_authentication[0];
          this.toastyService.error(data.message);
        }else if (data.error == 2) {
          // const message = data.error.user_authentication[0];
           this.toastyService.error(data.message.original.message);
         } else {
          this.store.dispatch(this.authActions.loginSuccess(data));
          this.modalShow$.next(false);
          this.toastyService.success('Login Success');
          this.setTokenInLocalStorage(res.headers.toJSON());
        }
      });
    }
  </code></pre>
  
  <p>this is http.ts, here i changed content type but not working.</p>
  
  <pre><code> post(url: string, body: any, options?: RequestOptionsArgs): Observable&lt;any&gt; {
      this.requestInterceptor();
      return super.post(this.getFullUrl(url), body, this.requestOptions(options))
        .catch(this.onCatch.bind(this))
        .do((res: Response) =&gt; {
          this.onSubscribeSuccess(res);
        }, (error: any) =&gt; {
          this.onSubscribeError(error);
        })
        .finally(() =&gt; {
          this.onFinally();
        });
    }
  
   private requestOptions(options?: RequestOptionsArgs): RequestOptionsArgs {
      if (options == null) {
        options = new RequestOptions();
      }
  
      if (options.headers == null) {
        const token = localStorage.getItem('accessToken');
        options.headers = new Headers({
          'Content-Type': 'application/json',
          'Authorization': token
        });
      }
      return options;
    }
  </code></pre>
  
  <p>This is laravel loginController class for login function</p>
  
  <pre><code>public function login(Request $request)
      { 
        $this-&gt;validateLogin($request);
  
          if ($this-&gt;attemptLogin($request)) {
              $user = $this-&gt;guard()-&gt;user();
              if($user['confirmed'] == 0){
                  $response['error'] = 1;
                  $response['message'] = "you havn't verified your email..";
                  return response()-&gt;json($response, 201);
              }else{
                  $user-&gt;generateToken();
                  return response()-&gt;json(
                      $user-&gt;toArray()
                 );
              }
  
          }
          $res['errors'] = 2;
          $res['message'] = $this-&gt;sendFailedLoginResponse($request);
         return response()-&gt;json($res, 201);
      }
  </code></pre>
  
  <p>THis is AuthenticateUser.php file</p>
  
  <pre><code>trait AuthenticatesUsers
  {
      use RedirectsUsers, ThrottlesLogins;
  
  
      public function showLoginForm()
      {
          return view('auth.login');
      }
  
  
      public function login(Request $request)
      {
          $this-&gt;validateLogin($request);
  
          // If the class is using the ThrottlesLogins trait, we can automatically throttle
          // the login attempts for this application. We'll key this by the username and
          // the IP address of the client making these requests into this application.
          if ($this-&gt;hasTooManyLoginAttempts($request)) {
              $this-&gt;fireLockoutEvent($request);
  
              return $this-&gt;sendLockoutResponse($request);
          }
  
          if ($this-&gt;attemptLogin($request)) {
              return $this-&gt;sendLoginResponse($request);
          }
  
          // If the login attempt was unsuccessful we will increment the number of attempts
          // to login and redirect the user back to the login form. Of course, when this
          // user surpasses their maximum number of attempts they will get locked out.
          $this-&gt;incrementLoginAttempts($request);
  
          return $this-&gt;sendFailedLoginResponse($request);
      }
  
  
      protected function validateLogin(Request $request)
      {
  
          $this-&gt;validate($request, [
              $this-&gt;username() =&gt; 'required|string',
              'password' =&gt; 'required|string',
          ]);
      }
  
  
      protected function attemptLogin(Request $request)
      {
          return $this-&gt;guard()-&gt;attempt(
              $this-&gt;credentials($request), $request-&gt;filled('remember')
          );
      }
  
  
      protected function credentials(Request $request)
      {
          return $request-&gt;only($this-&gt;username(), 'password');
      }
  
  
      protected function sendLoginResponse(Request $request)
      {
          $request-&gt;session()-&gt;regenerate();
  
          $this-&gt;clearLoginAttempts($request);
  
          return $this-&gt;authenticated($request, $this-&gt;guard()-&gt;user())
                  ?: redirect()-&gt;intended($this-&gt;redirectPath());
      }
  
  
      protected function authenticated(Request $request, $user)
      {
          //
      }
  
      protected function sendFailedLoginResponse(Request $request)
      {
          /*
          throw ValidationException::withMessages([
              $this-&gt;username() =&gt; [trans('auth.failed')],
          ]);*/
          return response()-&gt;JSON([ 'success' =&gt; false, 'message' =&gt; 'Invalid username or password!' ]);
       }
     public function username()
       {
          return 'email';
       }
  }
  </code></pre>
  
  <p>my response is here when giving any invalid input but i havent got this response in frontend but it work in postman application.</p>
  
  <pre><code>{
      "errors": 2,
      "message": {
          "headers": {},
          "original": {
              "success": false,
              "message": "Invalid username or password!"
          },
          "exception": null
      }
  }
  </code></pre>
  
  <p>when i check in laravel debugger i got </p>
  
  <pre><code>The given data was invalid.
  </code></pre>
  
  <p>I tried related post of 422 error, but not able find solution. Where do i fix this issue?</p>