Question

我无法正常处理我的表单我将验证表单放入验证后的问题如果删除验证，则登录系统会像魅力一样工作我有这个错误

（节点：9664）UnhandledPromiseRejectionWarning：TypeError：无法读取null的属性“ password” 在app.post（F：\ Projecto \ GestStocks \ Server \ index.js：23：41）在process._tickCallback（内部/进程/next_tick.js:68:7）（节点：9664）UnhandledPromiseRejectionWarning：未处理的承诺拒绝。引发此错误的原因可能是抛出了一个没有catch块的异步函数，或者是拒绝了一个.catch（）无法处理的承诺。（拒绝ID：1）（节点：9664）[DEP0018] DeprecationWarning：已弃用未处理的承诺拒绝。将来，未处理的承诺拒绝将以非零退出代码终止Node.js进程。（节点：9664）UnhandledPromiseRejectionWarning：TypeError：无法读取null的属性“ password” 在app.post（F：\ Projecto \ GestStocks \ Server \ index.js：23：41）在process._tickCallback（内部/进程/next_tick.js:68:7）（节点：9664）UnhandledPromiseRejectionWarning：未处理的承诺拒绝。引发此错误的原因可能是抛出了一个没有catch块的异步函数，或者是拒绝了一个.catch（）无法处理的承诺。（拒绝ID：2）

这是我的代码

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>

Answer 1

您不应该真正将jQuery与Angular一起使用，这是一个坏习惯。

您的登录名应类似于以下内容：-

<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>

创建表单时，您还应该真正使用Angular表单控制器：-

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;
  }
}

这应该适合您，您将需要更新login（）函数。

有关更多信息，请查看Angular Reactive Forms

您还需要添加表单上的样式。

Angular 7和Nodejs的验证表单存在问题

1 个答案: