--- title: Bitovi Academy - Learn RxJS description: Learn RxJS by creating a validating credit card form. --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us) - ![Project management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us) - ![Product design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us) - [View more → ](https://www.bitovi.com/digital-consulting-services?hsLang=en-us) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us) - [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us) - [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us) - [View more → ](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about perfecting software delivery ](https://bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships?hsLang=en-us) - [![Academy](https://www.bitovi.com/hubfs/limbo/icons/icon-academy.svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy/?hsLang=en-us) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse our tools or contribute to our open source mission. ](https://www.bitovi.com/open-source?hsLang=en-us) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com - [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us) - [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us) - [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us) - [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us) - [ Learn React Native ](https://www.bitovi.com/academy/learn-react-native.html?hsLang=en-us) - [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us) - [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us) - [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us) - [ Basics ](https://www.bitovi.com/academy/learn-rxjs/basics.html?hsLang=en-us) - [ RxJS in Angular ](https://www.bitovi.com/academy/learn-rxjs/angular.html?hsLang=en-us) - [ Clean card number ](https://www.bitovi.com/academy/learn-rxjs/clean-card-number.html?hsLang=en-us) - [ Card error ](https://www.bitovi.com/academy/learn-rxjs/card-error.html?hsLang=en-us) - [ Debugging ](https://www.bitovi.com/academy/learn-rxjs/debugging.html?hsLang=en-us) - [ Error on blur ](https://www.bitovi.com/academy/learn-rxjs/error-on-blur.html?hsLang=en-us) - [ Expiry ](https://www.bitovi.com/academy/learn-rxjs/expiry.html?hsLang=en-us) - [ CVC ](https://www.bitovi.com/academy/learn-rxjs/cvc.html?hsLang=en-us) - [ Disable pay button ](https://www.bitovi.com/academy/learn-rxjs/disable-pay-button.html?hsLang=en-us) - [ Request payment ](https://www.bitovi.com/academy/learn-rxjs/request-payment.html?hsLang=en-us) - [ Show paying ](https://www.bitovi.com/academy/learn-rxjs/show-paying.html?hsLang=en-us) - [ Disable while pending ](https://www.bitovi.com/academy/learn-rxjs/disable-while-pending.html?hsLang=en-us) - [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us) - [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us) - [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us) - [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us) - [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us) - [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us) - [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us) - [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us) - [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us) [View More Courses](https://www.bitovi.com/academy/#courses) [ ] # Learn RxJS `page` Learn RxJS by creating a validating credit card form. ## Before you begin [![](https://bitovi.github.io/academy/static/img/discord.png) Click here to join the Bitovi Community Discord](https://discord.gg/J7ejFsZnJ4) Join the Bitovi Community Discord to get help on Bitovi Academy courses or other Angular, React, CanJS and JavaScript problems. Please ask questions related to RxJS and Angular in the [Angular Chat Room](https://discord.gg/Qv26e4uq5z). If you find bugs in this training or have suggestions, create an [issue](https://github.com/bitovi/academy/issues) or email `contact@bitovi.com`. ## Video Who has time to read? This video covers the content on this page. Watch fullscreen. ## Overview In this tutorial we will create the following validating credit card form: See the Pen [Angular + RXJS](https://codepen.io/justinbmeyer/pen/vvpNJz/) by Justin Meyer ([@justinbmeyer](https://codepen.io/justinbmeyer)) on [CodePen](https://codepen.io). This credit card form: - Validates input as a user types, but *only* once a user blurs an input element. - Enables the **PAY** button once the credit card information is valid. - Disables the **PAY** button and changes its text to **PAYING** while payment is being processed. - Logs a success message when payment has completed. - Simulates a payment with a `Promise` that resolves in 2 seconds. We will use [RxJS 7.4](https://rxjs.dev) and [Angular 12](https://v12.angular.io/docs) for this example. All code examples will be able to work in a [CodePen](https://codepen.io/justinbmeyer/pen/vvpNJz) so you just need a browser to complete this tutorial! Each section of the guide is broken down into the following sections: - **The problem** — A description of what the section is trying to accomplish. - **What you need to know** — Information that is useful for solving the problem. - **The solution** — The solution to the problem. ## Outline - [Basics](https://www.bitovi.com/academy/learn-rxjs/basics.html?hsLang=en-us) - Learn how to create observables - [RxJS in Angular](https://www.bitovi.com/academy/learn-rxjs/angular.html?hsLang=en-us) - Read and write to observables in Angular - [Clean card number](https://www.bitovi.com/academy/learn-rxjs/clean-card-number.html?hsLang=en-us) - How to use `map` - [Card error](https://www.bitovi.com/academy/learn-rxjs/card-error.html?hsLang=en-us) - Use `map` again - [Debugging](https://www.bitovi.com/academy/learn-rxjs/debugging.html?hsLang=en-us) - How to debug observables without messing up state - [Error on blur](https://www.bitovi.com/academy/learn-rxjs/error-on-blur.html?hsLang=en-us) - Only show the card error when blurred - `merge`, `scan` - [Expiry](https://www.bitovi.com/academy/learn-rxjs/expiry.html?hsLang=en-us) - Read, validate, and show the error of the expiry - [CVC](https://www.bitovi.com/academy/learn-rxjs/cvc.html?hsLang=en-us) - Read, validate, and show the error of the CVC - [Disable pay button](https://www.bitovi.com/academy/learn-rxjs/disable-pay-button.html?hsLang=en-us) - Disable the pay button if any part of the card has an error - `combineLatest` - [Request payment](https://www.bitovi.com/academy/learn-rxjs/request-payment.html?hsLang=en-us) - Make a request when the pay button is clicked - [Show paying](https://www.bitovi.com/academy/learn-rxjs/show-paying.html?hsLang=en-us) - Update the pay button’s text while payments are pending - [Disable while pending](https://www.bitovi.com/academy/learn-rxjs/disable-while-pending.html?hsLang=en-us) - Disable the payment button while payments are pending ## Logic Flow The following presentation shows how the observables are wired up. This will be a useful reference for understanding how the tutorial works: ## Tips - Open Developer Tools and stack CodePen vertically: ![CodePen stacked](https://bitovi.github.io/academy/static/img/codepen-stack.png) - Save your CodePen - If you can’t figure out what is breaking, use an [online diff checker](https://www.diffchecker.com/) to compare your code with the solution. ![DiffChecker](https://bitovi.github.io/academy/static/img/diff-checker.png) ## Prerequisites - This guide makes a minor use of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). A basic understanding of promises is required. - This guide makes a minor use of TypeScript. TypeScript knowledge is *not* required, but it might help to make sense of the solutions. The [Learn TypeScript](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us) guide is more than sufficient background. - This guide uses Angular. However, most of the Angular parts are explained. Angular experience is not required; however, experience in some other modern web framework **is** required. ## Next steps Head over to the [first lesson](https://www.bitovi.com/academy/learn-rxjs/basics.html?hsLang=en-us) and learn about observables. ###### On this page... ###### Get help If you need [help](https://discord.gg/J7ejFsZnJ4) with an exercise, please reach out to us on [Discord](https://discord.gg/J7ejFsZnJ4) If you find a bug, please [create an issue](https://github.com/bitovi/academy/issues/new) or email [contact@bitovi.com](mailto:contact@bitovi.com?Subject=Training%20Suggestion) ## Join the Bitovi Newsletter Do you want to receive updates about new Bitovi Academy courses, Bitovi open source projects, and dev community news? If so, please provide your email. We won’t spam you or give it away for any reason! *By providing your email you agree to receive communications from Bitovi* ![](https://bitovi.github.io/academy/static/img/close.svg) ```json { "@context": "http://schema.org", "@type": "Organization", "mainEntityOfPage":{ "@type":"WebPage", "@id":"https://www.bitovi.com/academy/learn-rxjs.html", "description": "Learn RxJS by creating a validating credit card form. " }, "url": "http://bitovi.com", "logo": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "image": "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "name": "Bitovi Web App Consulting", "alternateName": "Bitovi", "naics": "541511", "description": "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "address": { "@type": "PostalAddress", "streetAddress": "1134 Pine Tree Lane ", "addressLocality": "Libertyville", "addressRegion": "IL", "addressCountry": "United States", "postalCode": "60048" }, "areaServed": { "@type": "GeoCircle", "geoMidpoint": { "@type": "GeoCoordinates", "latitude": "41.8781", "longitude": "87.6298" }, "geoRadius": "5000 km" }, "telephone": "312-620-0386", "email": "contact@bitovi.com", "sameAs": [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ] } ```