javascript - 响应式(Reactive)表单验证不起作用

Question

我已经为用户注册创建了一个组件

import { Component } from '@angular/core';
import {UserManagementService} from '../user-management.service';
import {User} from "../user";
import {FormBuilder, FormGroup,Validators} from "@angular/forms";

@Component({
  selector: 'app-signup-component',
  templateUrl: './signup-component.component.html',
  styleUrls: ['./signup-component.component.css'],
  providers:[UserManagementService]
})
export class SignupComponentComponent  {

  newUser:User;

  signupForm:FormGroup; 

  constructor(private userManagementService: UserManagementService, private fb:FormBuilder) {
    this.createForm();
  }

  createForm(){
    this.signupForm = this.fb.group({
      firstName:['',Validators.required], 
      lastName:['',Validators.required],
      email:['',Validators.required],
      password:['',Validators.required]
    });
  }

  addUser(){
    this.newUser = new User({
      firstname:this.signupForm.get('firstName').value,
      lastname:this.signupForm.get('lastName').value,
      email:this.signupForm.get('email').value
    });
    console.log("in SignupComponentComponent: addUser: "+this.newUser);
    this.userManagementService.addUser(this.newUser);
  }

}

模板如下

<div class="div__signup"> 
  <div class="content_div--white"> 

    <form class="signup-form" [formGroup]="signupForm" (ngSubmit)="addUser()" novalidate>
      <label for="firstname" class="first-name">First Name</label>

      <input id="firstname" type="text" class="form-control" formControlName="firstName" required>

      <label for="lastname" class="last-name">Last Name</label>
      <input id="lastname" type="text" class="form-control" formControlName="lastName" required>

      <label for="email" class="email"> Email</label>
      <input id="email" type="email" class="form-control" formControlName="email" required>

      <label for="password" class="password">Password</label>
      <input id="password" type="password" class="form-control" formControlName="password" required>

      <label for="verify-password" class="verify-password">Verify Password</label>
      <input id="verify-password" type="password" class="form-control" required>

      <button type="submit"  id="signup-button" class="content-div__button--blue"> Sign Up! </button>
    </form>
  </div>
</div>

用户管理服务是

import { Injectable } from '@angular/core';
import {User} from './user';

@Injectable()
export class UserManagementService {

  constructor() { }

  addUser(user:User){
    console.log("In UserManagementService: addUser: "+user)
  }

}

即使我提交带有任何数据的表单(所有 input 为空)，我也会看到以下两条控制台消息

in SignupComponentComponent: addUser: [object Object]
In UserManagementService: addUser: [object Object]

似乎 Validators 没有工作(我一定没有正确使用它们)。为什么调用 UserManagementService。如果表单中有错误，Angular 不应该提交表单吗？

Answer 1

给你:

  addUser(){
    if (this.signupForm.valid) {
      this.newUser =  this.signupForm.value;
      console.log("in SignupComponentComponent: addUser: ", this.newUser);
      this.userManagementService.addUser(this.newUser);
    }
  }

  <button type="submit" [disabled]="signupForm.invalid" id="signup-button" class="content-div__button--blue"> Sign Up! </button>

您首先需要测试表单是否有效。 Angular 允许您提交表单，即使它是无效的，这样您就可以制作您自己的东西(例如，显示一条错误消息)。

您还可以通过直接获取表单的值来缩短代码，而不是像您那样重新创建用户。

如果您的表单无效，您也可以停用按钮，这样用户就无法发送表单。