This project was generated with Angular CLI version 15.2.1.
This repo serves as an example of how to integrate Yup natively into Angular's reactive forms as well as validation lifecycle.
It helps to integrate the robustness of Yup's error handling and error messaging system with Angular's native but limited validation.
Another awesome thing I would say is the Typescript support, it feels like how Reactive forms typically work, but much better.
On this branch, I am simply showing you the way you would typically setup validation for a signup form.
Switch to yup-angular-forms branch to see how you would do it with Yup + my integration code.
It's really simple, First make sure to switch to yup-angular-forms branch.
Next, all you have to do is copy all the code inside the form-handler.ts
file in the utilities folder.
You can make your own form-handler file and paste or put the code where you want.
They're just utility functions to help integrate Yup and provide incredible Typescript support.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.