Custom form validation with Angular

on YouTube ↗21m

" summary

Shows how to validate Angular forms with a reusable custom validator function for reactive forms and a matching validator directive implementing Validator for template-driven forms. Builds a credit-card checker that first tests three prefixes (AmEx/Visa/MasterCard) and then enforces 16 digits, returns keyed error objects, and plugs into FormBuilder or ngModel. Demonstrates live error rendering using ngIf and Angular’s ng-valid/ng-invalid CSS classes, provides StackBlitz and blog links, and the examples run in the demo.

AI-written summary · about

" chapters (9)

1. 0:00Intro
2. 1:00Form properties
3. 2:23CSS classes
4. 5:02From directive
5. 8:39Custom validation
6. 10:53Demo
7. 16:36Testing
8. 18:25Summary
9. 20:14Outro

" related talks

• 43mAngular Reactive Forms - Developing Forms and Validation with AngularFabian Gosebrink · Voxxed Days Zürich 2022
• 25mForm of Art: Validation in Angular FormsShmuela Jacobs · Ng-Poland 2017
• 35mLet's Build a Form Around ItSani Yusuf · ComponentsConf 2019
• 31mLet's build a form around itSani Yusaf · AngularConnect 2019
• 27mGeneric Forms with AngularEliran Eliassy · AngularUP 2018
• 28mHandling Angular Forms Without Losing Your SanityJennifer Wadella · NG-DE Conference 2019
• 20mLet’s Build A Form Around ItSani Yusuf · NGConf 2018
• 36mUnleash the Power of Angular Reactive FormNir Kaufman · AngularUP 2017