CODEWITHSUNDEEP
javascripthtmlangulartypescript
Manu Chadha
Manu Chadha

Reputation: 16755

Reactive Form validation not working

I have created a component for user signup

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

}

Following is the template

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

UserManagementService is

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

@Injectable()
export class UserManagementService {

  constructor() { }

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

}

Even if I submit the form withtou any data (all input empty), I see the following two console messages

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

It seems the Validators are not working (I must not be using them correctly). Why does the UserManagementService gets called. Shouldn't Angular not submit the form if there are errors in the form?

Upvotes: 3

Views: 4552

Answers (1)

user4676340
user4676340

Reputation:

Here you go : 

  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>

You first need to test if the form is valid. Angular lets you submit the form even if it's invalid, so that you can make something of your own (for instance, display an error message).

You also can shorten your code by getting the value of the form directly, instead of re-creating the user like you did.

You can also deactivate your button if your form is invalid, so that the user can't send the form.

Upvotes: 4

Related Questions