Frontend Mentor | Grooby's profile

@DrainGK

Submitted 8 months ago

Angular Interactive Credit Card

The Challenge: The objective is to create an interactive credit card detail form. The information entered in the form should be updated and displayed on the credit card in real-time. Additionally, the form should effectively handle errors when the inputs are in an incorrect format

How I have done it: For this challenge, I've chosen to use Angular and Angular Material. The decision is straightforward: I need to enhance my Angular skills for work. My initial expertise lies in ReactJS and NextJS, but recent projects have been utilizing Angular.

As a result, the approach I'm taking is slightly different.

I had to carefully consider which components to use, as well as the services that could be implemented within them. The overall structure in Angular differs from that in React, necessitating a more thoughtful planning process

In this project, surprisingly, there isn't a direct use of services for two-way data binding. Initially, I considered using the directive [(ngModel)] or passing props from the inputs to the cards. However, I soon realized that the components are siblings, not parent-child, which was a new insight for me.

Consequently, I should have used a third party, in this case, a 'shared' service, to facilitate information sharing between the card components. This approach reminded me of a similar implementation I had done in ReactJS using the Zustand store.

The rest of the functions involve logical aspects that require practice and research through resources like Stack Overflow, YouTube, ChatGPT, and Copilot. Identifying problems and knowing what to do comes with years of experience, which I am actively working on.

The second challenge involved Angular Material, and I'm learning new things about it every day. The reason for choosing Angular Material is the same as for Angular—it's what I'm using at work, and I need to become proficient with it.

One significant hurdle was error handling, which took days to resolve. I tried several solutions, but encountered a persistent issue: the card number input was not validating correctly. The issue was not with the format—the 4 digits were correct, there were no alphabetic characters, and space handling seemed fine. Eventually, I realized the problem was the spaces. In the form control, I initially used a regex for 'numbers only', which didn't allow spaces. The solution was to switch to a previously created 'cardNumberValidator' which addressed this issue.

Interactive credit card form [Angular/Angular Material]

Grooby• 90

@TheGroobi

Posted 8 months ago

Some quick issues i found in your code:

Your month and year values are not limited to two digits which breaks the design when you put in a higher value
Your year value accepts expired invalid cards

You could put a minlength/maxlength values on month year and cvc which eliminates the need for error if statement checking the regex at all

On the year input you could do something like this for checking the expiration of the card

let thisYear = new Date().getFullYear();
thisYear = thisYear.toString().slice(2, 4);
if (input.value < thisYear) {
    //your error statement here
};

i personally also included maxing the value at thisYear + 20;

On another note i really like the animations you did with inputs

Grooby

All comments

Interactive credit card form [Angular/Angular Material]

blog-preview-card-main