Problem with validation form with Angular 7 and Nodejs

Question

i can´t make my form work correctly the problem when i put my the validation the form i can´t make login work if remove the validation the login system work like charm i have this errors

(node:9664) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'password' of null at app.post (F:\Projecto\GestStocks\Server\index.js:23:41) at process._tickCallback (internal/process/next_tick.js:68:7) (node:9664) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:9664) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. (node:9664) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'password' of null at app.post (F:\Projecto\GestStocks\Server\index.js:23:41) at process._tickCallback (internal/process/next_tick.js:68:7) (node:9664) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

this is my code

ngOnInit() {
var runLoginValidator = function() {
var form = $('.form-login');
 var errorHandler = $('.errorHandler', form);
      form.validate({
        rules : {
          username : {
            minlength : 4,
            required : true
          },
          password : {
            minlength : 8,
            required : true
          }
        },
        submitHandler : function(form) {
          errorHandler.hide();
          //form.submit();
        },
        invalidHandler : function(event, validator) {//display error alert on form submit
          errorHandler.show();
        }
      });
    };
  runLoginValidator();

}

loginuser(event){
  event.preventDefault();
const target = event.target
const username= target.querySelector('#username').value
const password= target.querySelector('#password').value
this.Auth.getUserDetails(username,password).subscribe(data =>{
  if(data.success){
this.router.navigate(['homepage'])
this.Auth.setLoggedIn(true)
  }else{
    window.alert(data.message)
  }
})

}
  <form class="form-login" (submit)="loginuser($event)">
          <div class="form-group">
            <span class="input-icon">
              <input type="text" class="form-control" name="username" placeholder="Username" id="username">
              <i class="fa fa-user"></i> </span>
          </div>
          <div class="form-group form-actions">
            <span class="input-icon">
              <input type="password" class="form-control password" id="password" name="password" placeholder="Password">
              <i class="fa fa-lock"></i>
              <a class="forgot" href="#forgot">
                I forgot my password
              </a>
             </span>
          </div>

            <button type="submit" class="btn btn-primary pull-right">
              Login <i class="fa fa-arrow-circle-right"></i>
            </button>
          </div>

      </form>

Welcome to stackoverflow! When working with Angular, it is recommended that you follow Angular's recommended approach for validation ... not JQuery. Angular provides two techniques for form management/validation: template-driven forms and reactive forms. You can read more about them here: angular.io/guide/form-validation I have examples of both template-driven and reactive forms validation here: github.com/DeborahK/Angular-ReactiveForms (See Demo-Startfor template-driven forms and Demo-Final for reactive forms) — DeborahK

Hensler Software Hensler Software · Accepted Answer · 2019-01-23T22:02:47

You shouldn't really use jQuery with Angular, it's bad practice.

Your login for should look like the following:-

<form [formGroup]="loginForm" (ngSubmit)="login()">
  <input placeholder="Username" type="text" formControlName="username">
  <input placeholder="Password" type="password" formControlName="password">
  <button [disabled]="!loginForm.valid">Login</button>
</form>

You should also really be using Angular form controllers when creating a form:-

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  loginForm;

  constructor() {}

  ngOnInit() {
    this.loginForm = new FormGroup({
      username: new FormControl('', [Validators.required, Validators.minLength(4)]),
      password: new FormControl('', [Validators.required, Validators.minLength(8)]),
    });
  }

  login() {
    console.log(this.loginForm.value);
    let username = this.loginForm.value.username;
    let password = this.loginForm.value.password;
  }
}

This should work for you, you will need to update the login() function.

For more information look at Angular Reactive Forms

You will also need to add in the styles you have on your form.

Problem with validation form with Angular 7 and Nodejs

1 Answers