Website-Suche

javascript - Validierung von reaktiven Formularen funktioniert nicht

Ich habe eine Komponente für die Nutzeranmeldung erstellt

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

}

Folgendes ist die Vorlage

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

Benutzerverwaltungsdienst ist

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

@Injectable()
export class UserManagementService {

  constructor() { }

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

}

Auch wenn ich das Formular ohne Daten absende (alle input leer), sehe ich die folgenden zwei Konsolenmeldungen

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

Es scheint, dass die Validators nicht funktionieren (ich muss sie nicht richtig verwenden). Warum wird der UserManagementService aufgerufen? Sollte Angular das Formular nicht nicht absenden, wenn es Fehler im Formular gibt?

Antwort #1

Hier, bitte:

  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>

Sie müssen zuerst prüfen, ob das Formular gültig ist. Angular erlaubt es Ihnen, das Formular auch dann abzusenden, wenn es ungültig ist, damit Sie etwas Eigenes erstellen können (zum Beispiel eine Fehlermeldung anzeigen).

Sie können Ihren Code auch verkürzen, indem Sie den Wert des Formulars direkt abrufen, anstatt den Benutzer neu zu erstellen, wie Sie es getan haben.

Sie können Ihre Schaltfläche auch deaktivieren, wenn Ihr Formular ungültig ist, sodass der Benutzer das Formular nicht senden kann.

Verwandte Artikel