CODEWITHSUNDEEP
angular
Bar Akiva
Bar Akiva

Reputation: 1209

Conditional display of elements in Angular using the visibility property instead of display

The form validation works, but I don't like that the elements displaying the invalid error messages to the user are shown on a display:none basis when I use [hidden] (or removal/addition to the DOM in the case of *ngIf). That affects the layout of the form, which I find irritating from a UX perspective.

I'd very much like to use visibility:hidden (so that I maintain the layout). Is there an elegant way to do that in Angular? Here is what I am aiming at:

enter image description here

Here's my current code:

<form class="signup-form" [formGroup]="registerForm" (ngSubmit)="submitSignup()">
<input class="signup-input" type="text" name="email" placeholder="Email"
       formControlName="email">
<div [hidden]="!email.valid && email.touched">
  <small *ngIf="email.errors ?.required">Email is required</small>
  <small *ngIf="email.errors ?.minLength" >Email is too short</small>
  <small *ngIf="email.errors ?.forbiddenName">Email is illegal</small>
</div>
<button type="submit" class="signup-submit">Create Account</button>

Upvotes: 0

Views: 423

Answers (1)

Kevin Zhang
Kevin Zhang

Reputation: 1082

As I know in angular, you can use [hidden], [ngStyle], [ngClass] to do this things, for [ngStyle], [ngClass] you can set display: none or min-height to make sure layout not shift out.

Upvotes: 1

Related Questions