Submitted almost 2 years agoA solution to the Age calculator app challenge
Age Calculator - Angular
angular, sass/scss, typescript
@satutama

Solution retrospective
I feel like my template could be more simple. But I am not sure if there is a cleaner way. The *ngIf's for the validation seems to much in my taste.. maybe someone else has better way?
for example this is one of the input element
<div class="data">
<label for="year" [ngClass]="{'invalid': isInvalid(year)}">YEAR</label>
<input id="year" type="number" formControlName="year" placeholder="YYYY" [ngClass]="{'invalid': isInvalid(year)}" />
<div *ngIf="isInvalid(year)" class="alert">
<div *ngIf="year.errors?.['required']">This field is required</div>
<div *ngIf="year.errors?.['min'] || year.errors?.['max']">
Must be in the past
</div>
</div>
</div>
</div>
I feel like it can be repeated with *ngFor but I don't think it is possible.. is it?
Code
Loading...
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Satria Utama's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord