How to prevent repetition in Angular html?

Question

I have an input in my html as follows:

<ng-container *ngIf="({required: <some_condition>, invalid: <some_condition>}) as emailErrors">
    <input type="email" class="form-control" placeholder="Email" validate-onblur [class.is-invalid]="emailErrors.required || emailErrors.invalid" [attr.aria-invalid]="emailErrors.required || emailErrors.invalid" [attr.aria-describedby]="emailErrors.required || emailErrors.invalid ? 'email-error' : undefined">
    <div *ngIf="emailErrors.required" id="email-error">
        <p class="error-msg">{{messages.EMAIL_REQ}}</p>
    </div>
</ng-container>

Here in my <input> tag I'm repeting this condition 3 times: emailErrors.required || emailErrors.invalid.

Can I store this condition here in a variable, so that I do not have to repeat it?

P.S. I'm new in Angular

As answerd by @Yong Shaun You can use getter approach. Even angular material heavily using getter approach. You can check material code here:material.angular.io/guide/… — Chellappan வ
– Chellappan வ, Commented Jul 28, 2021 at 6:33

Yashwardhan Pauranik · Accepted Answer · 2021-07-28 06:16:20Z

1

I would recommend you to use the template form of Angular. These are fairly simpler to implement.

In the code below make sure you give name property on the input field otherwise an error will be thrown, while working on with [(ngModel)]

<form #f="ngForm">
  <input type="email" class="form-control" placeholder="Email" name="mail" required [(ngModel)]="model.email" #mail="ngModel">
  <span *ngIf="mail.invalid">
        {{messages.EMAIL_REQ}}
  </span>
</form>

answered Jul 28, 2021 at 6:16

Yashwardhan Pauranik

5,5865 gold badges45 silver badges78 bronze badges

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

2 Comments

Keshav Bhatiya Over a year ago

How will this approach add aria-invalid and aria-describedby in the input tag?

Yashwardhan Pauranik Over a year ago

@KeshavBhatiya Try the same approach [attr.aria-invalid]="mail.invalid".

Barremian · Accepted Answer · 2021-07-28 07:01:49Z

Why not introduce an additional property in the wrapping <ng-container>? And seeing that emailErrors.invalid isn't used anywhere else, it could be removed if it's unneeded.

<ng-container *ngIf="({required: <condition_1>, reqOrInv: <condition_1> || <condition_2>}) as emailErrors">
  <input 
    type="email" 
    class="form-control" 
    placeholder="Email" 
    validate-onblur 
    [class.is-invalid]="emailErrors.reqOrInv" 
    [attr.aria-invalid]="emailErrors.reqOrInv" 
    [attr.aria-describedby]="emailErrors.reqOrInv ? 'email-error' : undefined"
  >
  <div *ngIf="emailErrors.required" id="email-error">
    <p class="error-msg">{{messages.EMAIL_REQ}}</p>
  </div>
</ng-container>

But as @YashwardhanPauranik noted in their answer, you're better off using Angular template driven or reactive forms. They provide more granular control.

Collectives™ on Stack Overflow

How to prevent repetition in Angular html?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related