Angular reactive form doesn't display error message

Question

I have an error to get an error on my reactive form (Angular 11).

when i want to show error message when my input email and password haven't set, but i have an error Object is possibly null

my login.component.html

<div class="row mt-5">
    <div class="col-md-6 mx-auto">
      <form [formGroup]="loginForm">
  
        <div class="form-group">
          <label for="email">Email</label>
          <input
            formControlName="email"
            type="text"
            class="form-control"
            id="email"
            required
          >
  
          <div Class="text-danger">
            <div *ngIf="loginForm.get('email').hasError('required')">Email is Required !</div>
          </div>
        </div>
  
        <div class="form-group">
          <label for="password">Password</label>
          <input
            formControlName="password"
            type="password"
            class="form-control"
            id="password"
            required
          >
  
          <div Class="text-danger" >
            <div *ngIf="loginForm.get('password').hasError('required')">Password is Required !</div>
            <div *ngIf="loginForm.get('password').hasError('minlength')">Password was to be 8 Caracters !</div>
          </div>
        </div>
        {{loginForm.value | json}}
        <button [disabled]="loginForm.invalid" class="btn btn-primary btn-block">Sign In</button>
      </form>
    </div>
  </div>

my login.component.ts

loginForm: FormGroup ;

  constructor() { }

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl(null, [Validators.required]),
      password: new FormControl(null, [Validators.required, Validators.minLength(8)])
    });
  }

  get email() { return this.loginForm.get('email'); }

  get password() { return this.loginForm.get('password'); }

Can you tell me why i haven't to get the error message and i have compilation error called Object is possibly null. In app.module.ts file , i had the formsModule and ReactiveModule in import section.

Krunal Shah · Accepted Answer · 2021-02-01 11:40:34Z

1

Try like as this -

In your Component just create one function and remove both which you have created for each control - email and password.

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

In your HTML -

 <div *ngIf="inputRequired.email.errors" class="text-danger">
    <div *ngIf="inputRequired.email.errors.required">Email is Required !</div>
 </div>

I have just shown you for Email, similarly you can do it for Password field too.

answered Feb 1, 2021 at 11:40

Krunal Shah

8601 gold badge8 silver badges25 bronze badges

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

2 Comments

obela06 Over a year ago

Hi @Krunal Shah, very thanks, your solution works perfectly

Krunal Shah Over a year ago

@obela06 great... it would be very helpful for others if you mark my answer as correct.

allan makura · Accepted Answer · 2021-02-01 11:45:31Z

It is because you are creating the form inside ngOnInit. You can move this into the constructor. Also, you can use the getters to simplify your logic and also avoid further compilation issues when checking for validation errors.

  <form [formGroup]="loginForm">
  
    <div class="form-group">
      <label for="email">Email</label>
      <input
        formControlName="email"
        type="text"
        class="form-control"
        id="email"
        required
      >

      <div Class="text-danger">
        <div *ngIf="email.hasError('required')">Email is Required !</div>
      </div>
    </div>

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

      <div Class="text-danger" >
        <div *ngIf="password.hasError('required')">Password is Required !</div>
        <div *ngIf="password.hasError('minlength')">Password was to be 8 Caracters !</div>
      </div>
    </div>
    {{loginForm.value | json}}
    <button [disabled]="loginForm.invalid" class="btn btn-primary btn-block">Sign In</button>
  </form>

loginForm: FormGroup ;

  constructor() { 

    this.loginForm = new FormGroup({
      email: new FormControl(null, [Validators.required]),
      password: new FormControl(null, [Validators.required, Validators.minLength(8)])
    });
  }

  ngOnInit(): void {
  }

  get email() { return this.loginForm.get('email') as FormControl; }

  get password() { return this.loginForm.get('password') as FormControl; }

Hi @allan, i does your solution , but i have the same problem

Collectives™ on Stack Overflow

Angular reactive form doesn't display error message

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related