0

我正在使用 MEAN 堆栈创建登录和注册页面。我的注册表单验证不起作用。只有第一个在工作；其余字段没有显示任何内容。除此之外，当表单提交时，数据被传递到数据库，但它没有显示成功消息

这是我的代码

register.component.html

<form #signupForm="ngForm" (ngSubmit)="signupForm.valid && onSignUp(signupForm)">
  <div class="form-group">
    <input
    type="text"
    ngModel
    name="fullname"
    required
    [ngClass] ="{'invalid-textbox' :signupForm.submitted && !fullname.valid}"
    placeholder="Enter fullname"
    #fullname="ngModel">
    <div *ngIf="signupForm.submitted && !fullname.valid">
      <label class="validation-message">Field can not be empty</label>
    </div>
  </div>

  <div class="form-group">
    <input
    type="text"
    ngModel
    name="email"
    required
    placeholder="Enter your email"
    [pattern] = "emailRegex"
    [ngClass] ="{'invalid-textbox' :signupForm.submitted && !email.valid}"
    #fullname="ngModel">
    <div *ngIf="signupForm.submitted && email.errors">
      <label *ngIf="email.errors.required" class="validation-message">This feild can not be empty</label>
      <label *ngIf="email.errors.pattern" class="validation-message">Invalid Email</label>
    </div>
  </div>

  <div class="form-group">
    <input
    type="password"
    ngModel
    name="password"
    required
    placeholder="Enter password"
    [ngClass] ="{'invalid-textbox' :signupForm.submitted && !password.valid}"
    minlength="5"
    #fullname="ngModel">
    <div *ngIf="signupForm.submitted && password.errors">
      <label *ngIf="password.errors.required" class="validation-message">Password is required</label>
      <label *ngIf="password.errors.minlength" class="validation-message">Minimum length is 5</label>
    </div>
  </div>

  <input
    type="submit"
    value="Sign Up"/>
</form>

<div class="success" *ngIf="showSuccessMessage">
  Saved Successfully
</div>


<div class="alert" *ngIf="serverErrorMessages">
  {{serverErrorMessages}}
</div>

注册组件.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { StudentService } from 'src/app/student-services/student.service';

@Component({
  selector: 'app-sing-up',
  templateUrl: './sing-up.component.html',
  styleUrls: ['./sing-up.component.css'],
  providers: [StudentService]
})
export class SingUpComponent implements OnInit {

  emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  showSuccessMessage: boolean | undefined;

  public fullname: any;
  public email: any;
  public password: any;
  serverErrorMessages: any;

  ngOnInit(): void {}

  constructor(private studentService: StudentService) { }

  onSignUp(form: NgForm) {

    this.studentService.postStudent(form.value).subscribe(
      res => {
        this.showSuccessMessage = true;
        setTimeout(() => this.showSuccessMessage = false, 4000);
      },
      err => {
        if(err.status == 442) {
          this.serverErrorMessages = err.error.join("</br>");
        } else {
          this.serverErrorMessages = 'Something wrong';
        }
      }
    );

    if (form.invalid) {
      return;
    }

  }

如果您对此验证和成功消息有什么问题，有人可以告诉我吗？

4

0 回答 0