@ngil/form-cva 0.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +140 -4
  2. package/package.json +41 -9
package/README.md CHANGED
@@ -1,7 +1,143 @@
1
- # ngil-ui-common-form-cva
1
+ # @ngil/form-cva
2
2
 
3
- This library was generated with [Nx](https://nx.dev).
3
+ The @ngil/form-cva provides facilities to create FormControl, FormGroup control value accessors.
4
+ It was created to be used by presentational components.
4
5
 
5
- ## Running unit tests
6
+ ## Installation
6
7
 
7
- Run `nx test ngil-ui-common-form-cva` to execute the unit tests.
8
+ npm install @ngil/form-cva
9
+
10
+ ## FormControl CVA
11
+
12
+ input.component.ts
13
+
14
+ ```
15
+ import { AfterViewInit, ChangeDetectionStrategy, Component, forwardRef, Input } from '@angular/core';
16
+ import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
17
+ import { AbstractInputComponent } from '@ngil/form-cva';
18
+ import { takeUntil } from 'rxjs/operators';
19
+
20
+ @Component({
21
+ selector: 'ngil-input',
22
+ templateUrl: './input.component.html',
23
+ styleUrls: ['./input.component.scss'],
24
+ providers: [
25
+ {
26
+ provide: NG_VALUE_ACCESSOR,
27
+ useExisting: forwardRef(() => NgilInputComponent),
28
+ multi: true
29
+ }
30
+ ],
31
+ changeDetection: ChangeDetectionStrategy.OnPush
32
+ })
33
+ export class NgilInputComponent extends AbstractInputComponent<string | number> implements AfterViewInit {
34
+ @Input() type = 'text';
35
+
36
+ control = new FormControl();
37
+
38
+ ngAfterViewInit() {
39
+ this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
40
+ this.onChangeInput(value);
41
+ });
42
+ }
43
+
44
+ writeValue(value: string | number): void {
45
+ this.control.setValue(value);
46
+ }
47
+
48
+ onChangeInput(value: string | number): void {
49
+ if (this.type === 'number') {
50
+ value = +value;
51
+ }
52
+ if (this.onChange) {
53
+ this.onChange(value);
54
+ }
55
+ }
56
+ }
57
+ ```
58
+
59
+ form.component.html
60
+ https://github.com/allanartuso/ngdux/tree/master/libs/demo/ui/properties/src/lib/address-form
61
+
62
+ ```
63
+ <form [formGroup]="formGroup">
64
+ <ngil-input label="Country" formControlName="country"></ngil-input>
65
+ <ngil-input label="City" formControlName="city"></ngil-input>
66
+ <ngil-input label="Zip code" formControlName="zipCode"></ngil-input>
67
+ <ngil-input label="Street" formControlName="street"></ngil-input>
68
+ <ngil-input label="Street number" formControlName="streetNumber"></ngil-input>
69
+ </form>
70
+
71
+ ```
72
+
73
+ ## FormGroup CVA
74
+
75
+ Stackblitz: https://stackblitz.com/edit/angular-fieejt?file=src/form.ts
76
+
77
+ address-form.component.ts
78
+
79
+ ```
80
+ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
81
+ import { FormControl, FormGroup } from '@angular/forms';
82
+ import { AddressDto } from '@demo/demo/data-model/properties';
83
+ import { AbstractFormGroupComponent, FlatFormControlsOf, createControlValueAccessorProviders } from '@ngil/form-cva';
84
+
85
+ @Component({
86
+ selector: 'demo-address-form',
87
+ templateUrl: './address-form.component.html',
88
+ styleUrls: ['./address-form.component.scss'],
89
+ changeDetection: ChangeDetectionStrategy.OnPush,
90
+ providers: createControlValueAccessorProviders(AddressFormComponent)
91
+ })
92
+ export class AddressFormComponent extends AbstractFormGroupComponent<AddressDto> {
93
+ formGroup = new FormGroup<FlatFormControlsOf<AddressDto>>({
94
+ country: new FormControl(''),
95
+ city: new FormControl(''),
96
+ zipCode: new FormControl(''),
97
+ street: new FormControl(''),
98
+ streetNumber: new FormControl('')
99
+ });
100
+ }
101
+ ```
102
+
103
+ address-form.component.html
104
+
105
+ ```
106
+ <form [formGroup]="formGroup">
107
+ <input formControlName="country" />
108
+ <input formControlName="city" />
109
+ <input formControlName="zipCode" />
110
+ <input formControlName="street" />
111
+ <input formControlName="streetNumber" />
112
+ </form>
113
+ ```
114
+
115
+ form.component.ts
116
+
117
+ ```
118
+ import { Component } from '@angular/core';
119
+ import { FormControl, FormGroup } from '@angular/forms';
120
+ import { PropertyDto } from '@demo/demo/data-model/properties';
121
+ import { AbstractFormComponent, FlatFormControlsOf } from '@ngil/form-cva';
122
+
123
+ @Component({
124
+ selector: 'demo-property-form',
125
+ templateUrl: './property-form.component.html',
126
+ styleUrls: ['./property-form.component.scss']
127
+ })
128
+ export class PropertyFormComponent {
129
+
130
+ formGroup = new FormGroup<FlatFormControlsOf<PropertyDto>>({
131
+ address: new FormControl(null),
132
+ ...
133
+ });
134
+ }
135
+ ```
136
+
137
+ form.component.html
138
+
139
+ ```
140
+ <form [formGroup]="formGroup">
141
+ <demo-address-form formControlName="address"></demo-address-form>
142
+ </form>
143
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ngil/form-cva",
3
- "version": "0.1.0",
3
+ "version": "1.2.0",
4
4
  "dependencies": {
5
5
  "tslib": "^2.3.0"
6
6
  },
@@ -10,6 +10,44 @@
10
10
  "directory": "/libs/ngil/ui/common/cva"
11
11
  },
12
12
  "homepage": "https://github.com/allanartuso/ngdux/tree/master/libs/ngil/ui/common/cva#readme",
13
+ "peerDependencies": {
14
+ "@angular/core": "^15.0.0",
15
+ "@angular/forms": "^15.0.0",
16
+ "rxjs": "^7.0.0",
17
+ "@angular/common": "^15.0.0"
18
+ },
19
+ "default": {
20
+ "name": "@ngil/form-cva",
21
+ "version": "1.1.1",
22
+ "dependencies": {
23
+ "tslib": "^2.3.0"
24
+ },
25
+ "repository": {
26
+ "type": "git",
27
+ "url": "git@github.com:allanartuso/ngdux.git",
28
+ "directory": "/libs/ngil/ui/common/cva"
29
+ },
30
+ "homepage": "https://github.com/allanartuso/ngdux/tree/master/libs/ngil/ui/common/cva#readme",
31
+ "default": {
32
+ "name": "@ngil/form-cva",
33
+ "version": "0.1.0",
34
+ "dependencies": {
35
+ "tslib": "^2.3.0"
36
+ },
37
+ "repository": {
38
+ "type": "git",
39
+ "url": "git@github.com:allanartuso/ngdux.git",
40
+ "directory": "/libs/ngil/ui/common/cva"
41
+ },
42
+ "homepage": "https://github.com/allanartuso/ngdux/tree/master/libs/ngil/ui/common/cva#readme"
43
+ },
44
+ "peerDependencies": {
45
+ "@angular/core": "^15.0.0",
46
+ "@angular/forms": "^15.0.0",
47
+ "rxjs": "^7.0.0",
48
+ "@angular/common": "^15.0.0"
49
+ }
50
+ },
13
51
  "module": "fesm2015/ngil-form-cva.mjs",
14
52
  "es2020": "fesm2020/ngil-form-cva.mjs",
15
53
  "esm2020": "esm2020/ngil-form-cva.mjs",
@@ -29,11 +67,5 @@
29
67
  "default": "./fesm2020/ngil-form-cva.mjs"
30
68
  }
31
69
  },
32
- "sideEffects": false,
33
- "peerDependencies": {
34
- "@angular/core": "15.2.9",
35
- "@angular/forms": "15.2.9",
36
- "rxjs": "7.8.1",
37
- "@angular/common": "15.2.9"
38
- }
39
- }
70
+ "sideEffects": false
71
+ }