Design comparison
SolutionDesign
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?
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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