the events since template-driven forms are created by the
framework over time | 100 | | dirtyChange
191 |
192 |
193 |
194 | @if(lastNameAvailable()){
195 |
196 |
197 | }
198 |
199 | ```
200 |
201 | ```typescript
202 | class MyComponent {
203 | ...
204 | protected readonly lastNameAvailable =
205 | computed(() => !!this.formValue().generalInformation?.firstName);
206 | }
207 | ```
208 |
209 | This will automatically add and remove the form control from our form model.
210 | This also works for a form group:
211 |
212 | ```html
213 | @if(showGeneralInfo()){
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 | }
222 | ```
223 |
224 | ### Reactive disabling
225 |
226 | To achieve reactive disabling, we just have to take advantage of computed signals as well:
227 |
228 | ```typescript
229 | class MyComponent {
230 | protected readonly lastNameDisabled =
231 | computed(() => !this.formValue().generalInformation?.firstName);
232 | }
233 | ```
234 |
235 | We can bind the computed signal to the `disabled` directive of Angular.
236 | ```html
237 |
240 | ```
241 |
242 | ### Validations
243 |
244 | The absolute gem in ngx-vest-forms is the flexibility in validations without writing any boilerplate.
245 | The only dependency this lib has is [vest.js](https://vestjs.dev). An awesome lightweight validation framework.
246 | You can use it on the backend/frontend/Angular/react etc...
247 |
248 | We use vest because it introduces the concept of vest suites. These are suites that kind of look like unit-tests
249 | but that are highly flexible:
250 | * [X] Write validations on forms
251 | * [X] Write validations on form groups
252 | * [X] Write validations on form controls
253 | * [X] Composable/reuse-able different validation suites
254 | * [X] Write conditional validations
255 |
256 | This is how you write a simple Vest suite:
257 | ```typescript
258 | import { enforce, only, staticSuite, test } from 'vest';
259 | import { MyFormModel } from '../models/my-form.model'
260 |
261 | export const myFormModelSuite = staticSuite(
262 | (model: MyformModel, field?: string) => {
263 | if (field) {
264 | // Needed to not run every validation every time
265 | only(field);
266 | }
267 | test('firstName', 'First name is required', () => {
268 | enforce(model.firstName).isNotBlank();
269 | });
270 | test('lastName', 'Last name is required', () => {
271 | enforce(model.lastName).isNotBlank();
272 | });
273 | }
274 | );
275 | };
276 | ```
277 |
278 | In the `test` function the first parameter is the field, the second is the validation error.
279 | The field is separated with the `.` syntax. So if we would have an `addresses` form group with an `billingAddress` form group inside
280 | and a form control `street` the field would be: `addresses.billingAddress.street`.
281 |
282 | This syntax should be self-explanatory and the entire enforcements guidelines can be found on [vest.js](https://vestjs.dev).
283 |
284 | Now let's connect this to our form. This is the biggest pain that ngx-vest-forms will fix for you: **Connecting Vest suites to Angular**
285 |
286 | ```typescript
287 | class MyComponent {
288 | protected readonly formValue = signal
341 |
351 | ```
352 |
353 | This is the only thing we need to do to create a form that is completely wired with vest.
354 | * [x] Automatic creation of form controls and form groups
355 | * [x] Automatic connection to vest suites
356 | * [x] Automatic typo validation
357 | * [x] Automatic adding of css error classes and showing validation messages
358 | * [x] On blur
359 | * [x] On submit
360 |
361 | ### Conditional validations
362 |
363 | Vest makes it extremely easy to create conditional validations.
364 | Assume we have a form model that has `age` and `emergencyContact`.
365 | The `emergencyContact` is required, but only when the person is not of legal age.
366 |
367 | We can use the `omitWhen` so that when the person is below 18, the assertion
368 | will not be done.
369 |
370 | ```typescript
371 | import { enforce, omitWhen, only, staticSuite, test } from 'vest';
372 |
373 | ...
374 | omitWhen((model.age || 0) >= 18, () => {
375 | test('emergencyContact', 'Emergency contact is required', () => {
376 | enforce(model.emergencyContact).isNotBlank();
377 | });
378 | });
379 | ```
380 |
381 | You can put those validations on every field that you want. On form group fields and on form control fields.
382 | Check this interesting example below:
383 |
384 | * [x] Password is always required
385 | * [x] Confirm password is only required when there is a password
386 | * [x] The passwords should match, but only when they are both filled in
387 |
388 | ```typescript
389 | test('passwords.password', 'Password is not filled in', () => {
390 | enforce(model.passwords?.password).isNotBlank();
391 | });
392 | omitWhen(!model.passwords?.password, () => {
393 | test('passwords.confirmPassword', 'Confirm password is not filled in', () => {
394 | enforce(model.passwords?.confirmPassword).isNotBlank();
395 | });
396 | });
397 | omitWhen(!model.passwords?.password || !model.passwords?.confirmPassword, () => {
398 | test('passwords', 'Passwords do not match', () => {
399 | enforce(model.passwords?.confirmPassword).equals(model.passwords?.password);
400 | });
401 | });
402 | ```
403 |
404 | Forget about manually adding, removing validators on reactive forms and not being able to
405 | re-use them. This code is easy to test, easy to re-use on frontend, backend, angular, react, etc...
406 | **Oh, it's also pretty readable**
407 |
408 | ### Composable validations
409 |
410 | We can compose validations suites with sub suites. After all, we want to re-use certain pieces of our
411 | validation logic and we don't want one huge unreadable suite.
412 | This is quite straightforward with Vest.
413 |
414 | Let's take this simple function that validates an address:
415 |
416 | ```typescript
417 | export function addressValidations(model: AddressModel | undefined, field: string): void {
418 | test(`${field}.street`, 'Street is required', () => {
419 | enforce(model?.street).isNotBlank();
420 | });
421 | test(`${field}.city`, 'City is required', () => {
422 | enforce(model?.city).isNotBlank();
423 | });
424 | test(`${field}.zipcode`, 'Zipcode is required', () => {
425 | enforce(model?.zipcode).isNotBlank();
426 | });
427 | test(`${field}.number`, 'Number is required', () => {
428 | enforce(model?.number).isNotBlank();
429 | });
430 | test(`${field}.country`, 'Country is required', () => {
431 | enforce(model?.country).isNotBlank();
432 | });
433 | }
434 | ```
435 |
436 | Our suite would consume it like this:
437 |
438 | ```typescript
439 | import { enforce, omitWhen, only, staticSuite, test } from 'vest';
440 | import { PurchaseFormModel } from '../models/purchaseFormModel';
441 |
442 | export const mySuite = staticSuite(
443 | (model: PurchaseFormModel, field?: string) => {
444 | if (field) {
445 | only(field);
446 | }
447 | addressValidations(model.addresses?.billingAddress, 'addresses.billingAddress');
448 | addressValidations(model.addresses?.shippingAddress, 'addresses.shippingAddress');
449 | }
450 | );
451 | ```
452 |
453 | We achieved decoupling, readability and reuse of our addressValidations.
454 |
455 | #### A more complex example
456 |
457 | Let's combine the conditional part with the reusable part.
458 | We have 2 addresses, but the shippingAddress is only required when the `shippingAddressIsDifferentFromBillingAddress`
459 | Checkbox is checked. But if it is checked, all fields are required.
460 | And if both addresses are filled in, they should be different.
461 |
462 | This gives us validation on:
463 | * [x] The addresses form field (they can't be equal)
464 | * [x] The shipping Address field (only required when checkbox is checked)
465 | * [x] validation on all the address fields (street, number, etc) on both addresses
466 |
467 | ```typescript
468 | addressValidations(
469 | model.addresses?.billingAddress,
470 | 'addresses.billingAddress'
471 | );
472 | omitWhen(
473 | !model.addresses?.shippingAddressDifferentFromBillingAddress,
474 | () => {
475 | addressValidations(
476 | model.addresses?.shippingAddress,
477 | 'addresses.shippingAddress'
478 | );
479 | test('addresses', 'The addresses appear to be the same', () => {
480 | enforce(JSON.stringify(model.addresses?.billingAddress)).notEquals(
481 | JSON.stringify(model.addresses?.shippingAddress)
482 | );
483 | });
484 | }
485 | );
486 | ```
487 |
488 | ### Validation options
489 |
490 | The validation is triggered immediately when the input on the formModel changes.
491 | In some cases you want to debounce the input (e.g. if you make an api call in the validation suite).
492 |
493 | You can configure additional `validationOptions` at various levels like `form`, `ngModelGroup` or `ngModel`.
494 |
495 | ```html
496 |
497 |
508 | ```
509 |
510 |
511 | ### Validations on the root form
512 |
513 | When we want to validate multiple fields that are depending on each other,
514 | it is a best practice to wrap them in a parent form group.
515 | If `password` and `confirmPassword` have to be equal the validation should not happen on
516 | `password` nor on `confirmPassword`, it should happen on `passwords`:
517 |
518 | ```typescript
519 | const form = {
520 | // validation happens here
521 | passwords: {
522 | password: '',
523 | confirmPassword: ''
524 | }
525 | };
526 | ```
527 |
528 | Sometimes we don't have the ability to create a form group for 2 depending fields, or sometimes we just
529 | want to create validation rules on portions of the form. For that we can use `validateRootForm`.
530 | Use the `errorsChange` output to keep the errors as state in a signal that we can use in the template
531 | wherever we want.
532 |
533 | ```html
534 | {{ errors()?.['rootForm'] }}
535 | {{ errors() }}
536 |
544 | ```
545 |
546 | ```typescript
547 | export class MyformComponent {
548 | protected readonly formValue = signal
342 |
344 |
345 |
346 |
347 |
348 |
349 |
350 | -
2 |
- Purchase form 3 |
- Business hours form 4 |
4 |
23 |
24 |
45 | 5 | Example: form array with complex validations 6 |
7 |-
8 |
- Always show an error if there is no business hour added 9 |
- From field is required 10 |
- To field is required 11 |
- From field should be valid time 12 |
- To field should be valid time 13 |
-
14 | If both from and to fields are valid:
15 |
-
16 |
- To field should be later than from field 17 |
19 | - The same should apply for edit 20 |
- If more than 1 business hour is added, there should be no overlap 21 |
46 |
Valid: {{ formValid() }}
47 | 48 |The value of the form
49 |
50 | {{ formValue() | json }}
51 |
52 |
53 |
54 | {{ errors() | json }}
55 |
56 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/smart/business-hours-form/business-hours-form.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | @apply flex flex-col max-w-screen-lg mx-auto py-8 px-4 lg:py-16;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/smart/business-hours-form/business-hours-form.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, signal } from '@angular/core';
2 | import { JsonPipe } from '@angular/common';
3 | import {
4 | ValidateRootFormDirective,
5 | ROOT_FORM,
6 | vestForms,
7 | } from 'ngx-vest-forms';
8 | import {
9 | BusinessHoursFormModel,
10 | businessHoursFormShape,
11 | } from '../../../models/business-hours-form.model';
12 | import { businessHoursSuite } from '../../../validations/business-hours.validations';
13 | import { BusinessHourComponent } from '../../ui/business-hour/business-hour.component';
14 | import { BusinessHoursComponent } from '../../ui/business-hours/business-hours.component';
15 |
16 | @Component({
17 | selector: 'sc-business-hours-form',
18 | standalone: true,
19 | imports: [
20 | JsonPipe,
21 | vestForms,
22 | ValidateRootFormDirective,
23 | BusinessHourComponent,
24 | BusinessHoursComponent,
25 | ],
26 | templateUrl: './business-hours-form.component.html',
27 | styleUrls: ['./business-hours-form.component.scss'],
28 | })
29 | export class BusinessHoursFormComponent {
30 | protected readonly formValue = signal
4 |
53 |
54 |
55 | 5 | Example: complex form with comples validations and conditionals 6 |
7 |-
8 |
- Show validation errors on blur 9 |
- Show validation errors on submit 10 |
- When first name is Brecht: Set gender to male 11 |
- 12 | When first name is Brecht and last name is 13 | Billiet: Set age and passwords 14 | 15 |
- 16 | When first name is Luke: Fetch 17 | Luke Skywalker from the swapi api 18 | 19 |
- When age is below 18, make Emergency contact required 20 |
- When age is of legal age, disable Emergency contact 21 |
- There should be at least one phone number 22 |
- Phone numbers should not be empty 23 |
- When gender is other, show Specify gender 24 |
- When gender is other, make Specify gender required 25 |
- Password is required 26 |
- Confirm password is only required when password is filled in 27 |
- Passwords should match, but only check if both are filled in 28 |
- Billing address is required 29 |
- Show shipping address only when needed (otherwise remove from DOM) 30 |
- 31 | If shipping address is different from billing address, make it required 32 | 33 |
- 34 | If shipping address is different from billing address, make sure they are 35 | not the same 36 | 37 |
- 38 | When providing shipping address and toggling the checkbox back and forth, 39 | make sure the state is kept 40 | 41 |
- 42 | When clicking the Fetch data button, load data, disable the form, and 43 | patch and re-enable the form 44 | 45 |
- When the user id is taken, perform async validation 46 |
- 47 | Try to set the firstName to Brecht lastName to Billiet, Now change the age 48 | to 30. It shows how we can do validations on the root 49 | 50 |
53 |
{{ vm.errors?.['rootForm'] }}
56 |
57 | @if (vm.errors?.['rootForm']) {
58 |
62 | {{ vm.errors?.['rootForm'] }}
63 |
64 | }
65 |
66 |
261 | 262 |
Valid: {{ vm.formValid }}
263 | 264 |The value of the form
265 |
266 | {{ vm.formValue | json }}
267 |
268 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/smart/purchase-form/purchase-form.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | @apply flex flex-col max-w-screen-lg mx-auto py-8 px-4 lg:py-16;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/smart/purchase-form/purchase-form.component.ts:
--------------------------------------------------------------------------------
1 | import { ValidateRootFormDirective, vestForms } from 'ngx-vest-forms';
2 | import { Component, computed, effect, inject, signal } from '@angular/core';
3 | import { JsonPipe } from '@angular/common';
4 | import { AddressComponent } from '../../ui/address/address.component';
5 | import { PhonenumbersComponent } from '../../ui/phonenumbers/phonenumbers.component';
6 | import { LukeService } from '../../../luke.service';
7 | import { SwapiService } from '../../../swapi.service';
8 | import { ProductService } from '../../../product.service';
9 | import { toObservable, toSignal } from '@angular/core/rxjs-interop';
10 | import {
11 | PurchaseFormModel,
12 | purchaseFormShape,
13 | } from '../../../models/purchase-form.model';
14 | import { createPurchaseValidationSuite } from '../../../validations/purchase.validations';
15 | import { AddressModel } from '../../../models/address.model';
16 | import { debounceTime, filter, switchMap } from 'rxjs';
17 |
18 | @Component({
19 | selector: 'sc-purchase-form',
20 | standalone: true,
21 | imports: [
22 | JsonPipe,
23 | vestForms,
24 | AddressComponent,
25 | PhonenumbersComponent,
26 | ValidateRootFormDirective,
27 | ],
28 | templateUrl: './purchase-form.component.html',
29 | styleUrls: ['./purchase-form.component.scss'],
30 | })
31 | export class PurchaseFormComponent {
32 | private readonly lukeService = inject(LukeService);
33 | private readonly swapiService = inject(SwapiService);
34 | private readonly productService = inject(ProductService);
35 | public readonly products = toSignal(this.productService.getAll());
36 | protected readonly formValue = signal
2 |
58 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/address/address.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simplifiedcourses/ngx-vest-forms/e4ee6ee5ef2a5edd427f73da682d229f03d47725/projects/examples/src/app/components/ui/address/address.component.scss
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/address/address.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | import { vestForms, vestFormsViewProviders } from 'ngx-vest-forms';
4 | import { AddressModel } from '../../../models/address.model';
5 |
6 | @Component({
7 | selector: 'sc-address',
8 | standalone: true,
9 | imports: [vestForms],
10 | viewProviders: [vestFormsViewProviders],
11 | templateUrl: './address.component.html',
12 | styleUrls: ['./address.component.scss'],
13 | })
14 | export class AddressComponent {
15 | @Input() address?: AddressModel;
16 | }
17 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/business-hour/business-hour.component.html:
--------------------------------------------------------------------------------
1 |
3 |
12 |
13 |
14 |
23 |
24 |
25 |
34 |
35 |
36 |
45 |
46 |
47 |
56 |
57 |
2 |
12 |
13 |
14 |
24 |
25 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/business-hour/business-hour.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | @apply flex;
3 | label {
4 | @apply flex items-center;
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/business-hour/business-hour.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { CommonModule, KeyValuePipe } from '@angular/common';
3 | import { vestForms, vestFormsViewProviders } from 'ngx-vest-forms';
4 | import { BusinessHourFormModel } from '../../../models/business-hours-form.model';
5 | import { NgxMaskDirective } from 'ngx-mask';
6 |
7 | @Component({
8 | selector: 'sc-business-hour',
9 | standalone: true,
10 | imports: [CommonModule, vestForms, KeyValuePipe, NgxMaskDirective],
11 | templateUrl: './business-hour.component.html',
12 | styleUrls: ['./business-hour.component.scss'],
13 | viewProviders: [vestFormsViewProviders],
14 | })
15 | export class BusinessHourComponent {
16 | @Input() public businessHour?: BusinessHourFormModel = {};
17 | }
18 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/business-hours/business-hours.component.html:
--------------------------------------------------------------------------------
1 |
2 |
21 |
37 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/business-hours/business-hours.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simplifiedcourses/ngx-vest-forms/e4ee6ee5ef2a5edd427f73da682d229f03d47725/projects/examples/src/app/components/ui/business-hours/business-hours.component.scss
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/business-hours/business-hours.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { CommonModule, KeyValuePipe } from '@angular/common';
3 | import {
4 | arrayToObject,
5 | DeepPartial,
6 | vestForms,
7 | vestFormsViewProviders,
8 | } from 'ngx-vest-forms';
9 | import { BusinessHourFormModel } from '../../../models/business-hours-form.model';
10 | import { BusinessHourComponent } from '../business-hour/business-hour.component';
11 | import { NgModelGroup } from '@angular/forms';
12 |
13 | @Component({
14 | selector: 'sc-business-hours',
15 | standalone: true,
16 | imports: [CommonModule, vestForms, KeyValuePipe, BusinessHourComponent],
17 | templateUrl: './business-hours.component.html',
18 | styleUrls: ['./business-hours.component.scss'],
19 | viewProviders: [vestFormsViewProviders],
20 | })
21 | export class BusinessHoursComponent {
22 | @Input() public businessHoursModel?: DeepPartial<{
23 | addValue: BusinessHourFormModel;
24 | values: {
25 | [key: string]: BusinessHourFormModel;
26 | };
27 | }> = {};
28 |
29 | public addBusinessHour(group: NgModelGroup): void {
30 | if (!this.businessHoursModel?.values) {
31 | return;
32 | }
33 | group.control.markAsUntouched();
34 | this.businessHoursModel.values = arrayToObject([
35 | ...Object.values(this.businessHoursModel.values),
36 | this.businessHoursModel.addValue,
37 | ]);
38 | this.businessHoursModel.addValue = undefined;
39 | }
40 |
41 | public removeBusinessHour(key: string): void {
42 | if (!this.businessHoursModel?.values) {
43 | return;
44 | }
45 | const businessHours = Object.values(this.businessHoursModel.values).filter(
46 | (v, index) => index !== Number(key)
47 | );
48 | this.businessHoursModel.values = arrayToObject(businessHours);
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/phonenumbers/phonenumbers.component.html:
--------------------------------------------------------------------------------
1 |
42 |
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/phonenumbers/phonenumbers.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simplifiedcourses/ngx-vest-forms/e4ee6ee5ef2a5edd427f73da682d229f03d47725/projects/examples/src/app/components/ui/phonenumbers/phonenumbers.component.scss
--------------------------------------------------------------------------------
/projects/examples/src/app/components/ui/phonenumbers/phonenumbers.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { CommonModule, KeyValuePipe } from '@angular/common';
3 | import {
4 | arrayToObject,
5 | vestForms,
6 | vestFormsViewProviders,
7 | } from 'ngx-vest-forms';
8 |
9 | @Component({
10 | selector: 'sc-phonenumbers',
11 | standalone: true,
12 | imports: [CommonModule, vestForms, KeyValuePipe],
13 | templateUrl: './phonenumbers.component.html',
14 | styleUrls: ['./phonenumbers.component.scss'],
15 | viewProviders: [vestFormsViewProviders],
16 | })
17 | export class PhonenumbersComponent {
18 | @Input() public values: { [key: string]: string } = {};
19 | public addValue = '';
20 |
21 | public addPhonenumber(): void {
22 | const phoneNumbers = [...Object.values(this.values), this.addValue];
23 | this.values = arrayToObject(phoneNumbers);
24 | this.addValue = '';
25 | }
26 |
27 | public removePhonenumber(key: string): void {
28 | const phonenumbers = Object.values(this.values).filter(
29 | (v, index) => index !== Number(key)
30 | );
31 | this.values = arrayToObject(phonenumbers);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/projects/examples/src/app/luke.service.ts:
--------------------------------------------------------------------------------
1 | import { inject, Injectable } from '@angular/core';
2 | import { HttpClient } from '@angular/common/http';
3 | import { map, Observable } from 'rxjs';
4 |
5 | @Injectable({ providedIn: 'root' })
6 | export class LukeService {
7 | private readonly httpClient = inject(HttpClient);
8 |
9 | public getLuke(): Observable<{
10 | firstName: string;
11 | lastName: string;
12 | gender: 'male' | 'female' | 'other';
13 | }> {
14 | return this.httpClient.get('https://swapi.dev/api/people/1').pipe(
15 | map((resp: any) => {
16 | const name = resp.name.split(' ');
17 | return {
18 | firstName: name[0],
19 | lastName: name[1],
20 | gender: resp.gender,
21 | };
22 | })
23 | );
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/projects/examples/src/app/models/address.model.ts:
--------------------------------------------------------------------------------
1 | import { DeepRequired, DeepPartial } from 'ngx-vest-forms';
2 |
3 | export type AddressModel = DeepPartial<{
4 | street: string;
5 | number: string;
6 | city: string;
7 | zipcode: string;
8 | country: string;
9 | }>;
10 | export const addressShape: DeepRequired
3 | @for (item of businessHoursModel?.values | keyvalue; track item.key) {
4 |
20 |
5 |
18 | }
19 |
6 |
17 | 21 |
22 |
36 |
23 |
35 | 
51 |
52 |
53 |
109 |
110 |
--------------------------------------------------------------------------------
/projects/examples/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | import { AppComponent } from './app/app.component';
3 | import {
4 | provideRouter,
5 | Routes,
6 | withEnabledBlockingInitialNavigation,
7 | } from '@angular/router';
8 | import { provideHttpClient } from '@angular/common/http';
9 | import { PurchaseFormComponent } from './app/components/smart/purchase-form/purchase-form.component';
10 | import { BusinessHoursFormComponent } from './app/components/smart/business-hours-form/business-hours-form.component';
11 | import { provideEnvironmentNgxMask } from 'ngx-mask';
12 |
13 | const appRoutes: Routes = [
14 | {
15 | path: '',
16 | redirectTo: 'purchase',
17 | pathMatch: 'full',
18 | },
19 | {
20 | path: 'purchase',
21 | component: PurchaseFormComponent,
22 | },
23 | {
24 | path: 'business-hours',
25 | component: BusinessHoursFormComponent,
26 | },
27 | ];
28 | bootstrapApplication(AppComponent, {
29 | providers: [
30 | provideHttpClient(),
31 | provideEnvironmentNgxMask({ validation: false }),
32 | provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
33 | ],
34 | });
35 |
--------------------------------------------------------------------------------
/projects/examples/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | /* Add application styles & imports to this file! */
3 | /* Add application styles & imports to this file! */
4 | @tailwind base;
5 | @tailwind components;
6 | @tailwind utilities;
7 |
8 | body {
9 | @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-white;
10 | }
11 | button {
12 | @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800;
13 | }
14 | button:disabled {
15 | @apply bg-gray-400 text-gray-700 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400;
16 | }
17 | fieldset {
18 | @apply grid gap-4 sm:grid-cols-2 sm:gap-6;
19 |
20 | label span {
21 | @apply block mb-2 text-sm font-medium text-gray-900 dark:text-white;
22 | }
23 |
24 | .sc-control-wrapper {
25 | select,
26 | input[type='text'],
27 | input[type='number'],
28 | input[type='password'] {
29 | @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500;
30 | }
31 |
32 | &--invalid {
33 | label span {
34 | @apply block mb-2 text-sm font-medium text-red-700 dark:text-red-500;
35 | }
36 |
37 | select,
38 | input[type='text'],
39 | input[type='number'],
40 | input[type='password'] {
41 | @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full dark:text-red-500 dark:placeholder-red-500 dark:border-red-500;
42 | }
43 | }
44 |
45 | &__errors {
46 | @apply mt-2 text-sm text-red-600 dark:text-red-500;
47 | }
48 |
49 | .radio-button {
50 | @apply flex items-center mb-4;
51 | label {
52 | @apply block ms-2 text-sm font-medium text-gray-900 dark:text-gray-300;
53 | }
54 |
55 | input[type='radio'] {
56 | @apply w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600;
57 | }
58 | }
59 | input[type='checkbox'] {
60 | @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600;
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/projects/examples/src/variables.scss:
--------------------------------------------------------------------------------
1 | $shoppie__gridunit: 8px;
2 | $shoppie-color__light-grey: #f1f1f1;
3 | $shoppie-color__grey: #ccc;
4 | $shoppie-color__accent: #267373;
5 | $shoppie-color__white: #fff;
6 |
--------------------------------------------------------------------------------
/projects/examples/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/app",
6 | "types": []
7 | },
8 | "files": ["src/main.ts"],
9 | "include": ["src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/projects/examples/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "../../tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "../../out-tsc/spec",
6 | "types": ["jasmine"]
7 | },
8 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/projects/ngx-vest-forms/.storybook/main.ts:
--------------------------------------------------------------------------------
1 | import type { StorybookConfig } from '@storybook/angular';
2 |
3 | const config: StorybookConfig = {
4 | stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
5 | addons: [
6 | '@storybook/addon-links',
7 | '@storybook/addon-essentials',
8 | '@chromatic-com/storybook',
9 | '@storybook/addon-interactions',
10 | '@storybook/addon-coverage',
11 | ],
12 | framework: {
13 | name: '@storybook/angular',
14 | options: {},
15 | },
16 | };
17 | export default config;
18 |
--------------------------------------------------------------------------------
/projects/ngx-vest-forms/.storybook/preview.ts:
--------------------------------------------------------------------------------
1 | import type { Preview } from '@storybook/angular';
2 | import { setCompodocJson } from '@storybook/addon-docs/angular';
3 | import docJson from '../documentation.json';
4 | setCompodocJson(docJson);
5 |
6 | const preview: Preview = {
7 | parameters: {
8 | controls: {
9 | matchers: {
10 | color: /(background|color)$/i,
11 | date: /Date$/i,
12 | },
13 | },
14 | },
15 | };
16 |
17 | export default preview;
18 |
--------------------------------------------------------------------------------
/projects/ngx-vest-forms/.storybook/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | /* Add application styles & imports to this file! */
3 | /* Add application styles & imports to this file! */
4 | @tailwind base;
5 | @tailwind components;
6 | @tailwind utilities;
7 |
8 | body {
9 | @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-white;
10 | }
11 | button {
12 | @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800;
13 | }
14 | fieldset {
15 | @apply grid gap-4 sm:grid-cols-2 sm:gap-6;
16 |
17 | label span {
18 | @apply block mb-2 text-sm font-medium text-gray-900 dark:text-white;
19 | }
20 |
21 | .sc-control-wrapper {
22 | select,
23 | input[type='text'],
24 | input[type='number'],
25 | input[type='password'] {
26 | @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-4 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500;
27 | }
28 |
29 | &--invalid {
30 | label span {
31 | @apply block mb-2 text-sm font-medium text-red-700 dark:text-red-500;
32 | }
33 |
34 | select,
35 | input[type='text'],
36 | input[type='number'],
37 | input[type='password'] {
38 | @apply bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full dark:text-red-500 dark:placeholder-red-500 dark:border-red-500;
39 | }
40 | }
41 |
42 | &__errors {
43 | @apply mt-2 text-sm text-red-600 dark:text-red-500;
44 | }
45 |
46 | .radio-button {
47 | @apply flex items-center mb-4;
48 | label {
49 | @apply block ms-2 text-sm font-medium text-gray-900 dark:text-gray-300;
50 | }
51 |
52 | input[type='radio'] {
53 | @apply w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600;
54 | }
55 | }
56 | input[type='checkbox'] {
57 | @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600;
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/projects/ngx-vest-forms/.storybook/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.lib.json",
3 | "compilerOptions": {
4 | "types": ["node"],
5 | "allowSyntheticDefaultImports": true,
6 | "resolveJsonModule": true
7 | },
8 | "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
9 | "include": ["../src/**/*.stories.*", "./preview.ts"],
10 | "files": ["./typings.d.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/projects/ngx-vest-forms/.storybook/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.md' {
2 | const content: string;
3 | export default content;
4 | }
5 |
--------------------------------------------------------------------------------
/projects/ngx-vest-forms/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 | "dest": "../../dist/ngx-vest-forms",
4 | "lib": {
5 | "entryFile": "src/public-api.ts"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/projects/ngx-vest-forms/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ngx-vest-forms",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "author": "Brecht Billiet",
6 | "description": "Opinionated template-driven forms library for Angular",
7 | "peerDependencies": {
8 | "@angular/core": ">=18.0.0",
9 | "@angular/common": ">=18.0.0",
10 | "rxjs": ">=7.8.0",
11 | "vest": ">=5.2.8"
12 | },
13 | "dependencies": {
14 | "tslib": "^2.3.0"
15 | },
16 | "keywords": [
17 | "Angular",
18 | "Forms",
19 | "Signals"
20 | ],
21 | "repository": "https://github.com/simplifiedcourses/ngx-vest-forms",
22 | "sideEffects": false
23 | }
24 |
--------------------------------------------------------------------------------
/projects/ngx-vest-forms/src/lib/components/control-wrapper/control-wrapper.component.html:
--------------------------------------------------------------------------------
1 |
2 |
13 |
--------------------------------------------------------------------------------
/projects/ngx-vest-forms/src/lib/components/control-wrapper/control-wrapper.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simplifiedcourses/ngx-vest-forms/e4ee6ee5ef2a5edd427f73da682d229f03d47725/projects/ngx-vest-forms/src/lib/components/control-wrapper/control-wrapper.component.scss
--------------------------------------------------------------------------------
/projects/ngx-vest-forms/src/lib/components/control-wrapper/control-wrapper.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | AfterViewInit,
3 | ChangeDetectionStrategy,
4 | ChangeDetectorRef,
5 | Component,
6 | ContentChild,
7 | HostBinding,
8 | inject,
9 | OnDestroy,
10 | } from '@angular/core';
11 |
12 | import { AbstractControl, NgModel, NgModelGroup } from '@angular/forms';
13 | import { mergeWith, of, Subject, switchMap, takeUntil } from 'rxjs';
14 | import { FormDirective } from '../../directives/form.directive';
15 |
16 | @Component({
17 | selector: '[sc-control-wrapper]',
18 | standalone: true,
19 | templateUrl: './control-wrapper.component.html',
20 | styleUrls: ['./control-wrapper.component.scss'],
21 | changeDetection: ChangeDetectionStrategy.OnPush,
22 | })
23 | export class ControlWrapperComponent implements AfterViewInit, OnDestroy {
24 | @ContentChild(NgModel) public ngModel?: NgModel; // Optional ngModel
25 | public readonly ngModelGroup: NgModelGroup | null = inject(NgModelGroup, {
26 | optional: true,
27 | self: true,
28 | });
29 | private readonly destroy$$ = new Subject
3 |
5 |
6 |
12 | -
7 | @for (error of errors; track error) {
8 |
- {{ error }} 9 | } 10 |