CODEWITHSUNDEEP
angulartypescriptangular-forms
obela06
obela06

Reputation: 335

Angular reactive form doesn't display error message

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.

Upvotes: 0

Views: 2798

Answers (2)

allan
allan

Reputation: 979

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

Upvotes: 0

Krunal Shah
Krunal Shah

Reputation: 863

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.

Upvotes: 1

Related Questions