如果条件在 angular 上使用节点后端（MEAN 堆栈）无法正常工作

Question

我的问题是，当我单击带有文本字段日期的“注册”按钮时，我的代码运行正常。根据我的代码，新用户使用我的节点后端在 MongoDB 中注册，并在 2 秒内重定向主页。

但问题是当我在文本字段中没有数据的情况下单击注册按钮时（只需在前端单击我的注册按钮）--: 只需在两秒内重定向主屏幕。

但是，它不应该在没有注册的情况下重定向到主屏幕。我该如何解决这个问题？

这是我的前端：

<form  [formGroup]="form" (submit)="onRegisterSubmit()" >
  <div class="form-group">
    <label for="email">Email address</label>
    <input aria-describedby="emailHelp" class="form-control" formControlName="email" id="exampleInputEmail1"
           name="email"
           placeholder="Enter email" type="email">
  </div>
  <div class="form-group">
    <label for="username">User Name</label>
    <input class="form-control" formControlName="username" id="exampleInputUserName" name="username" placeholder="User Name"
           type="text">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input class="form-control" formControlName="password" id="exampleInputPassword" name="password" placeholder="Password"
           type="password">
  </div>
  <div class="form-check">
    <input class="form-check-input" id="exampleCheck1" type="checkbox">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button [disabled]="processing" class="btn btn-primary" type="submit" value="submit">Submit</button>
</form>

这是我的 *register.component.spec.ts 函数：

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {AuthService} from "../services/auth.service";
import { Router } from '@angular/router';
import {ActivatedRoute} from '@angular/router';

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


  form!: FormGroup;
  message: any;
  messageClass: any;
  processing = false;

  constructor(
    private formBuilder: FormBuilder,
    private authService: AuthService,
    private routers:Router
  ) {
    this.createForm()
  }

  createForm() {
    this.form = this.formBuilder.group({
      email: ['', Validators.required],
      username: ['', Validators.required],
      password: ['', Validators.required]
    })
  }


  onRegisterSubmit() {
    this.processing = true
    this.disableForm()
    const user = {
      email: this.form.get('email')?.value,
      username: this.form.get('username')?.value,
      password: this.form.get('password')?.value
    }
    this.authService.registerUser(user).subscribe(data => {
      if (!data) {
        this.messageClass = 'alert alert-danger'
      
        this.processing = false
        this.enableForm()
      } else {
        this.messageClass = 'alert alert-danger'
        
        setTimeout(()=>{
          (<any>this.routers).navigate(['/home']);
        },2000)
      }
    })
  }

这是我的 auth.service.ts 文件：

import {Injectable} from '@angular/core';
import {map} from 'rxjs/operators';
import {HttpClient} from '@angular/common/http';
import 'rxjs/add/operator/map';


@Injectable({
  providedIn: 'root'
})

export class AuthService {
  domain = "http://localhost:3000"
  authToken: any
  user: any


  constructor(
    private http: HttpClient
  ) {
  }

  registerUser(user: any) {
    return this.http.post(this.domain + '/authentication/register', user)
  }

Answer 1

您没有检查表单是否有效，您必须在提交前手动检查。因此，在 onRegisterSubmit() 中将您的代码包装在以下内容中：

onRegisterSubmit() {
  // this runs the validators
  this.form.markAllAsTouched();
  if (this.form.valid) {
  //Add your code here
  }
}

如果条件在 angular 上使用节点后端（MEAN 堆栈）无法正常工作

If condition not working properly on angular with node backend (MEAN Stack)

angular

mean-stack