Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Interactive credit card form [Angular/Angular Material]

angular, sass/scss, typescript
DrainGK•350
@DrainGK
A solution to the Interactive card details form challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • Grooby•90
    @TheGroobi
    Posted over 1 year 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

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub