如果条件与节点后端的角度不正常工作(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.comcomponent.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
}
}