Question 266312 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why doesn't this Angular 16 reactive form return any validation errors?

I am working on a reactive registration form in Angular 16.

In componentsregistrationregistration.component.ts I have:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.scss']
})
export class RegistrationComponent implements OnInit {

  public registrationForm!: FormGroup;
  public isSuccess: Boolean = false;

  constructor(private formBuilder: FormBuilder) { }

  get form() { return this.registrationForm.controls }

  public registerUser() {
    console.log(this.registrationForm.value);
    console.log(this.registrationForm.errors);

    if (!this.registrationForm.invalid) {
      this.isSuccess = true;
    } else {
      return;
    }
  }

  ngOnInit() {
    this.registrationForm = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.minLength(3)]],
      lastName: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirm_password: ['', Validators.required],
      terms: [false, Validators.required],
    });
  }
}

In componentsregistrationregistration.component.html I have:

Your signup was successful!

<form [formGroup]="registrationForm" (ngSubmit)="registerUser()" novalidate>
    <div class="mb-2">
      <label for="firstName" class="form-label">
        First name
      </label>
      <input type="text" id="firstName" formControlName="firstName" class="form-control form-control-sm" />
      <span class="invalid-feedback" *ngIf="form['firstName'].errors?.['required']">The <i>First name</i> field is required</span>
    </div>
  
    <div class="mb-2">
      <label for="lastName" class="form-label">
        Last name
      </label>
      <input type="text" id="lastName" formControlName="lastName" class="form-control form-control-sm" />
      <span class="invalid-feedback" *ngIf="form['lastName'].errors?.['required']">The <i>Last name</i> field is required</span>
    </div>
  
    <div class="mb-2">
      <label for="email" class="form-label">
        Email address
      </label>
      <input type="email" id="email" formControlName="email" class="form-control form-control-sm" />
      <span class="invalid-feedback" *ngIf="form['email'].errors?.['required']">The <i>Email</i> field is required</span>
      <span class="invalid-feedback" *ngIf="form['email'].errors?.['email']">Please provide a valid email address</span>
      
    </div>
  
    <div class="mb-2">
      <label for="password" class="form-label">
        Password
      </label>
      <input type="password" id="password" formControlName="password" class="form-control form-control-sm" />
      <span class="invalid-feedback" *ngIf="form['password'].errors?.['required']">The <i>Password</i> field is required</span>
    </div>

    <div class="mb-2">
      <label for="confirm_password" class="form-label">
        Confirm password
      </label>
      <input type="password" id="confirm_password" formControlName="confirm_password" class="form-control form-control-sm" />
    </div>

    <div class="mb-2">
      <input type="checkbox" formControlName="terms" id="terms" class="me-1">
      <span class="text-muted">I accept the <a href="#" class="text-success">Terms & conditions</a></span>
      <span class="invalid-feedback" *ngIf="form['password'].errors?.['required']">You must accept our Terms & conditions</span>
    </div>
  
    <div class="pt-1">
      <button type="submit" class="btn btn-sm btn-success w-100">
        Submit
      </button>
    </div>
</form>

The problem

When I try to submit invalid data, no validation messages are displayed, and the Chrome console shows this.registrationForm.errors as having the value null.

Using, as an alternative, the syntax<span class="invalid-feedback" *ngIf="form.firstName.errors?.required">The <i>First name</i> field is required</span>, causes the error:

Property 'firstName' comes from an index signature, so it must be accessed with ['firstName'].
What am I doing wrong?
Tags:

2

Answers


  1. 0

    I think Problem is not with angular version.

        this.registrationForm = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.minLength(3)]],
      lastName: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirm_password: ['', Validators.required],
      terms: [false, Validators.required],
    }
    {
      Validators:[] // <------- Validator at Form level
    });

    there are several controls available inside formgroup like firstname, lastname so whatever validation error occur will consider as control error.
    If any custom validation you define at form level like I have indicate above will be display inside "this.registrationForm.errors".
    if you control level want to display message then you can use like below:

    this.registrationForm.get('firstName')!.errors
    Login or Signup to reply.
  2. 0

    The error is on individual form element. So it is always showing null. You can check the status of the form on submit & secondly you can also disable the submit button unless the form is valid

    export class RegistrationComponent implements OnInit {
  public registrationForm!: FormGroup;
  public isSuccess: Boolean = false;

  constructor(private formBuilder: FormBuilder) {}


  public registerUser() {
    console.log(this.registrationForm);
    console.log(this.registrationForm.errors);

    if (this.registrationForm.status !== 'INVALID') { // changed here
      this.isSuccess = true;
    } else {
      return;
    }
  }

  ngOnInit() {
    this.registrationForm = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.minLength(3)]],
      lastName: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirm_password: ['', Validators.required],
      terms: [false, Validators.required],
    });
  }
}

    <form [formGroup]="registrationForm" (ngSubmit)="registerUser()" novalidate>
  <div class="mb-2">
    <label for="firstName" class="form-label"> First name </label>
    <input type="text" id="firstName" formControlName="firstName" class="form-control form-control-sm" />
    <span class="invalid-feedback" *ngIf="registrationForm.controls['firstName'].errors?.['required']">The <i>First name</i> field is required</span
    >
  </div>

  <div class="mb-2">
    <label for="lastName" class="form-label"> Last name </label>
    <input
      type="text"
      id="lastName"
      formControlName="lastName"
      class="form-control form-control-sm"
    />
    <span
      class="invalid-feedback"
      *ngIf="registrationForm.controls['lastName'].errors?.['required']"
      >The <i>Last name</i> field is required</span
    >
  </div>

  <div class="mb-2">
    <label for="email" class="form-label"> Email address </label>
    <input
      type="email"
      id="email"
      formControlName="email"
      class="form-control form-control-sm"
    />
    <span
      class="invalid-feedback"
      *ngIf="registrationForm.controls['email'].errors?.['required']"
      >The <i>Email</i> field is required</span
    >
    <span
      class="invalid-feedback"
      *ngIf="registrationForm.controls['email'].errors?.['email']"
      >Please provide a valid email address</span
    >
  </div>

  <div class="mb-2">
    <label for="password" class="form-label"> Password </label>
    <input
      type="password"
      id="password"
      formControlName="password"
      class="form-control form-control-sm"
    />
    <span
      class="invalid-feedback"
      *ngIf="registrationForm.controls['password'].errors?.['required']"
      >The <i>Password</i> field is required</span
    >
  </div>

  <div class="mb-2">
    <label for="confirm_password" class="form-label"> Confirm password </label>
    <input
      type="password"
      id="confirm_password"
      formControlName="confirm_password"
      class="form-control form-control-sm"
    />
  </div>

  <div class="mb-2">
    <input type="checkbox" formControlName="terms" id="terms" class="me-1" />
    <span class="text-muted"
      >I accept the
      <a href="#" class="text-success">Terms & conditions</a></span
    >
    <span
      class="invalid-feedback"
      *ngIf="registrationForm.controls['password'].errors?.['required']"
      >You must accept our Terms & conditions</span
    >
  </div>

  <div class="pt-1">
    <button
      <!--disabling submit button unless form is valid-->
      [disabled]="!registrationForm.valid"
      type="submit"
      class="btn btn-sm btn-success w-100"
    >
      Submit
    </button>
  </div>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search