Strange errors with Angular Reactive Forms Validation

Question

I'm testing a simple login functionality on my products-page component form using Angular 7 and I'm having this strange behaviour. I am trying to display the appropriate validation messages if an error exists, like if it is not a valid email, the " must be a valid email " message should display, and if the field is left blank, the " email is required ", error should display, and when you start typing, the required message disappears and only the valid email error message shows. This is my code.

Addproduct.component.html

So now I'm trying to render the span-messages if the error exists but it's not working.

<form [formGroup]="loginForm" class="login-container" (ngSubmit)="login()">            
    <p>
        <input class="form-control" type="email" placeholder="Email here" formControlName="email">
        <span *ngIf="f.email.errors.required">email is required</span>
        <span *ngIf="f.email.errors.email">must be a valid email</span>
    </p>            
    <p>
        <input class="form-control" type="password" placeholder="Password here" formControlName="password">
        <span *ngIf="f.password.errors.required">Password is required</span>
    </p>
    <p><button type="submit" class="btn btn-md btn-primary">Submit</button></p>        
</form>

Addproduct.component.ts

and this is the controller, I tried using the short notation for the validation rules but yet to no avail.

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

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

  loginForm:FormGroup;
  isSubmitted:boolean = false;

  constructor(
    private router:Router,
    private fb:FormBuilder
  ){}

  ngOnInit() { 
    this.loginForm = this.fb.group({           
      email : ['',  [Validators.required,Validators.email]],    
      password : ['', [Validators.required,Validators.min(6)]]
    });
  }

  get f(){
    return this.loginForm.controls;
  }

}

I also changed the validation scripts to this but still to no avail

ngOnInit() { 
   this.loginForm = this.fb.group({           
      email : new FormControl('',  [Validators.required,Validators.email]),    
      password : new FormControl('', [Validators.required,Validators.min(6)])
   });
}

and I am getting this error

Peter Carter · Accepted Answer · 2022-02-06 01:09:28Z

4

You are checking for the presence of an error where no error might exist.

You want something like this:

f.email.errors?.required

Or even:

f.email?.errors?.required

Do the same for the password field and anywhere else where the property might not exist when it is first called.

edited Feb 6, 2022 at 1:09

answered Jul 23, 2019 at 12:25

Peter Carter

2,7489 gold badges31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NTP · Accepted Answer · 2019-07-23 12:32:20Z

1

You can also use

<span *ngIf="loginForm.hasError('required', ['password'])">Password is required</span>

In my opinion it is a lot more easier.

answered Jul 23, 2019 at 12:32

NTP

4,4483 gold badges18 silver badges25 bronze badges

3 Comments

Ande Caleb Over a year ago

good to know, i think i'd go with the former, but thanks for your opinion, duly noted.

NTP Over a year ago

@Andaeiii I'm glad I could help.

Peter Carter Over a year ago

hey @Andaeiii if you decided to use my answer please consider marking it as accepted. Thanks :)

Collectives™ on Stack Overflow

Strange errors with Angular Reactive Forms Validation

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest