2 |
15 |
3 |
7 |
8 |
9 |
13 |
14 |
16 |
29 |
17 |
21 |
22 |
23 |
27 |
28 |
30 |
34 |
35 |
--------------------------------------------------------------------------------
/src/app/components/address/address.component.scss:
--------------------------------------------------------------------------------
1 | sc-address {
2 | width: 100%;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/components/address/address.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, ViewEncapsulation } from '@angular/core';
2 |
3 | import { AddressModel } from '../../models/address.model';
4 | import {
5 | templateDrivenForms,
6 | templateDrivenFormsViewProviders
7 | } from '../../template-driven-forms/template-driven.forms';
8 |
9 | @Component({
10 | selector: 'sc-address',
11 | standalone: true,
12 | imports: [templateDrivenForms],
13 | viewProviders: [templateDrivenFormsViewProviders],
14 | encapsulation: ViewEncapsulation.None,
15 | templateUrl: './address.component.html',
16 | styleUrls: ['./address.component.scss']
17 | })
18 | export class AddressComponent {
19 | @Input() address?: AddressModel;
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/components/phonenumbers/phonenumbers.component.html:
--------------------------------------------------------------------------------
1 |
24 |
--------------------------------------------------------------------------------
/src/app/components/phonenumbers/phonenumbers.component.scss:
--------------------------------------------------------------------------------
1 | .phonenumbers, .phonenumbers__values {
2 | display: flex;
3 | flex-direction: column;
4 | }
5 |
6 | .phonenumbers__input-with-button {
7 | display: flex;
8 | width: 100%;
9 | input {
10 | flex: 1;
11 | }
12 | }
13 |
14 | button {
15 | margin-left: 8px;
16 | }
17 |
18 |
--------------------------------------------------------------------------------
/src/app/components/phonenumbers/phonenumbers.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { CommonModule, KeyValuePipe } from '@angular/common';
3 | import {
4 | templateDrivenForms,
5 | templateDrivenFormsViewProviders
6 | } from '../../template-driven-forms/template-driven.forms';
7 | import { arrayToObject } from '../../array-to-object';
8 |
9 | @Component({
10 | selector: 'sc-phonenumbers',
11 | standalone: true,
12 | imports: [CommonModule, templateDrivenForms, KeyValuePipe],
13 | templateUrl: './phonenumbers.component.html',
14 | styleUrls: ['./phonenumbers.component.scss'],
15 | viewProviders: [templateDrivenFormsViewProviders]
16 | })
17 | export class PhonenumbersComponent {
18 | @Input() public phonenumbers: { [key: string]: string } = {};
19 | public addValue = '';
20 |
21 | protected tracker = (i: number) => i;
22 |
23 | public addPhonenumber(): void {
24 | const phoneNumbers = [...Object.values(this.phonenumbers), this.addValue];
25 | this.phonenumbers = arrayToObject(phoneNumbers);
26 | this.addValue = '';
27 | }
28 |
29 | public removePhonenumber(key: string): void {
30 | const phonenumbers = Object.values(this.phonenumbers).filter(
31 | (v, index) => index !== Number(key))
32 | this.phonenumbers = arrayToObject(phonenumbers)
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/app/components/purchase-form/purchase-form.component.html:
--------------------------------------------------------------------------------
1 | Test it out
2 |-
3 |
- Show validation errors on blur 4 |
- Show validation errors on submit 5 |
- When first name is Brecht: Set gender to male 6 |
- When first name is Brecht and last name is Billiet: Set age and passwords 7 |
- When first name is Luke: Fetch Luke Skywalker from the swapi api 8 |
- When age is below 18, make Emergency contact required 9 |
- When age is of legal age, disable Emergency contact 10 |
- There should be at least one phone number 11 |
- Phone numbers should not be empty 12 |
- When gender is other, show Specify gender 13 |
- When gender is other, make Specify gender required 14 |
- Password is required 15 |
- Confirm password is only required when password is filled in 16 |
- Passwords should match, but only check if both are filled in 17 |
- Billing address is required 18 |
- Show shipping address only when needed (otherwise remove from DOM) 19 |
- If shipping address is different from billing address, make it required 20 |
- If shipping address is different from billing address, make sure they are not the same 21 |
- When providing shipping address and toggling the checkbox back and forth, make sure the state is kept 22 |
- When clicking the Fetch data button, load data, disable the form, and patch and re-enable the form 23 |
- When the user id is taken, perform async validation 24 |
27 | 168 |
169 |
Valid: {{vm.formValid}}
170 | 171 |The value of the form
172 |
173 | {{vm.formValue|json}}
174 |
175 |
--------------------------------------------------------------------------------
/src/app/components/purchase-form/purchase-form.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | width: 100%;
3 | display: flex;
4 | flex-direction: column;
5 | align-items:center;
6 | p, ul {
7 | width: 500px;
8 | margin: 0px;
9 | padding: 0px;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/components/purchase-form/purchase-form.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, computed, effect, inject, signal, ViewChild } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { ProductService } from '../../product.service';
4 | import { toObservable, toSignal } from '@angular/core/rxjs-interop';
5 | import { FormModel, formShape } from '../../models/form.model';
6 | import { AddressComponent } from '../address/address.component';
7 | import { debounceTime, filter, switchMap } from 'rxjs';
8 | import { LukeService } from '../../luke.service';
9 | import { PhonenumbersComponent } from '../phonenumbers/phonenumbers.component';
10 | import { AddressModel } from '../../models/address.model';
11 | import { templateDrivenForms } from '../../template-driven-forms/template-driven.forms';
12 | import { validateShape } from '../../template-driven-forms/shape-validation';
13 | import { createPurchaseValidationSuite } from '../../validations/purchase.validations';
14 | import { SwapiService } from 'src/app/swapi.service';
15 |
16 | @Component({
17 | selector: 'sc-purchase-form',
18 | standalone: true,
19 | imports: [CommonModule, templateDrivenForms, AddressComponent, PhonenumbersComponent],
20 | templateUrl: './purchase-form.component.html',
21 | styleUrls: ['./purchase-form.component.scss']
22 | })
23 | export class PurchaseFormComponent {
24 | private readonly lukeService = inject(LukeService);
25 | private readonly swapiService = inject(SwapiService);
26 | private readonly productService = inject(ProductService);
27 | public readonly products = toSignal(this.productService.getAll());
28 | protected readonly formValue = signal
2 |
4 |
5 |
11 |
--------------------------------------------------------------------------------
/src/app/template-driven-forms/control-wrapper/control-wrapper.component.scss:
--------------------------------------------------------------------------------
1 | .input-wrapper__errors {
2 | margin-top: 8px;
3 | li {
4 | list-style-type: none;
5 | border-color: #774771;
6 | font-weight:600;
7 | }
8 | ul {
9 | padding: 0px;
10 | margin: 0px;
11 | }
12 | }
13 | :host {
14 | display: flex;
15 | width: 100%;
16 | flex-direction: column;
17 | padding-bottom: 8px;
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/template-driven-forms/control-wrapper/control-wrapper.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ContentChild, HostBinding, inject } from '@angular/core';
2 |
3 | import { AbstractControl, NgModel, NgModelGroup } from '@angular/forms';
4 |
5 | @Component({
6 | selector: '[scControlWrapper]',
7 | standalone: true,
8 | imports: [],
9 | templateUrl: './control-wrapper.component.html',
10 | styleUrls: ['./control-wrapper.component.scss']
11 | })
12 | export class ControlWrapperComponent {
13 | // Cache the previous error to avoi 'flickering'
14 | private previousError?: string[];
15 | @ContentChild(NgModel) public ngModel?: NgModel; // Optional ngModel
16 |
17 | // Optional ngModelGroup
18 | public readonly ngModelGroup: NgModelGroup | null = inject(NgModelGroup, {
19 | optional: true,
20 | self: true,
21 | });
22 |
23 | private get control(): AbstractControl|undefined {
24 | return this.ngModelGroup ? this.ngModelGroup.control : this.ngModel?.control;
25 | }
26 |
27 | @HostBinding('class.input-wrapper--invalid')
28 | public get invalid() {
29 | return this.control?.touched && this.errors;//&& this.previousError;
30 | }
31 |
32 | public get errors(): string[] | undefined {
33 | if (this.control?.pending) {
34 | return this.previousError;
35 | } else {
36 | this.previousError = this.control?.errors?.['errors'];
37 | }
38 | return this.control?.errors?.['errors'];
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/template-driven-forms/deep-partial.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Simple type that makes every property and child property
3 | * partial, recursively. Why? Because template-driven forms are
4 | * deep partial, since they get created by the DOM
5 | */
6 | export type DeepPartial-
6 | @for (error of errors; track error) {
7 |
- {{error}} 8 | } 9 |
19 |
20 | 
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma'),
14 | ],
15 | client: {
16 | clearContext: false, // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, './coverage/my-app'),
20 | reports: ['html', 'lcovonly', 'text-summary'],
21 | fixWebpackSourcePaths: true,
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false,
30 | restartOnFileChange: true,
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import 'zone.js';
2 | import { bootstrapApplication } from '@angular/platform-browser';
3 | import { AppComponent } from './app/app.component';
4 | import { importProvidersFrom } from '@angular/core';
5 | import { provideHttpClient } from '@angular/common/http';
6 |
7 | bootstrapApplication(AppComponent, { providers: [provideHttpClient()] })
8 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simplifiedcourses/template-driven-forms/b5dffea83c9f977f4df2e93e0c86ee61882a2c6b/src/polyfills.ts
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "types": []
6 | },
7 | "files": ["main.ts", "polyfills.ts"],
8 | "include": ["**/*.d.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "types": ["jasmine", "node"]
6 | },
7 | "files": ["test.ts", "polyfills.ts"],
8 | "include": ["**/*.spec.ts", "**/*.d.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "strict": true,
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "sourceMap": true,
8 | "declaration": false,
9 | "downlevelIteration": true,
10 | "experimentalDecorators": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "importHelpers": true,
14 | "target": "es2015",
15 | "typeRoots": ["node_modules/@types"],
16 | "lib": ["es2018", "dom"]
17 | },
18 | "angularCompilerOptions": {
19 | "strictTemplates": true,
20 | "strictInjectionParameters": true
21 | }
22 | }
23 |
--------------------------------------------------------------------------------